Post on 25-Jan-2019
1
Escola Básica e Secundária de Salvaterra de Magos
RELATÓRIO
Prova de Aptidão Profissional
LookMyClothes
Rodrigo Cerquinha
Curso Profissional Técnico de Multimédia
12ºG Nº23
2
Escola Básica e Secundária de Salvaterra de Magos
Rodrigo Cerquinha
Curso Profissional Técnico de Multimédia
12ºG Nº23
SUMÁRIO
Relatório das actividades do Projecto
LookMyClothe, desenvolvido como requisito parcial
dos módulos curriculares, supervisionado pelos Prof.
António Andrade, Alice Perira e Teresa Fazenda, no
curso Profissional Técnico de Multimédia.
Salvaterra de Magos
Julho de 2016
3
Agradecimenos
Não posso deixar de agradecer a algumas pessoas que, direta ou indiretamente,
me ajudaram neste percurso para a minha vida profissional e, também, pessoal.
Agradeço, aqui, à empresa Lusosoft e a todo o pessoal, mas mais
especificamente ao Luís Vaz por me ter aceitado para estagiar na sua empresa e ao
Mário Constantino por se ter empenhado em me ensinar C# (linguagem de
programação), em me ajudar em todas as tarefas que me deu e pela grande orientação,
sem eles nada do que aprendi seria possível.
Aos professores da Escola Secundária de Salvaterra de Magos por me terem
criado todas as condições necessárias para estes três anos de curso e me terem
disponibilizado um computador com uma conta própria para poder construir este projeto
(P.A.P.), pois fiquei sem computador em casa e sem a escola era praticamente
impossível de ter tudo feito.
4
Índice
Agradecimenos .............................................................................................................................. 3
Resumo.......................................................................................................................................... 5
Introdução ..................................................................................................................................... 6
Softwares utilizados ...................................................................................................................... 7
Disciplinas importantes para a realização do projeto .................................................................... 8
O Nascer da Rede Social ............................................................................................................... 9
Anteprojeto.................................................................................................................................. 10
Gantt Project ............................................................................................................................... 10
Briefing ....................................................................................................................................... 10
Eleição do Nome ......................................................................................................................... 11
Logótipo ...................................................................................................................................... 12
Construção .............................................................................................................................. 12
Cor ........................................................................................................................................... 12
Rede Social ................................................................................................................................. 13
Aplicação Móvel ................................................................................................................. 13
Conclusão .................................................................................................................................... 15
Anexos ......................................................................................................................................... 17
Primeiros Estudos de Layout ............................................................................................... 17
............................................................................................................................................. 18
Segundos Estudos de Layout....................................................................................................... 22
Terceiros Estudos de Layout ....................................................................................................... 25
Modelo Gantt ...................................................................................................................... 26
5
Resumo
O nosso Projeto de Aptidão Profissional é uma rede social de partilha de roupa.
Desenvolvemos uma aplicação para Android, onde as pessoas se podem registar e a
partir dai partilhar fotos com os amigos. Quando o utilizador partilha mais que uma foto
o sistema cria um sistema de votação para os amigos escolherem qual das peças de
roupas gostam mais.
6
Introdução
No âmbito da Prova de Aptidão Profissional, explorei um tema que na minha
opinião conecta todo o mundo. A este tema associei os meus conhecimentos de
aprendizagem adquiridos no Formação em Contexto de Trabalho, realizado na empresa
Lusosoft, e por mim mesmo, pesquisando.
A Prova de Aptidão Profissional tem o nome de LookMyClothes, sendo este o
nome da minha rede social.
A Rede Social surgiu com o propósito de querer criar algo que possa ser usado
por todo o mundo, através de um smartphone com o sistema operativo Android.
Todo este projeto surgiu, quando senti a necessidade de criar algo inovador e
que ainda não fora apresentado em mais nenhuma P.A.P. e que não existisse ainda.
O estágio, que realizei na Lusosoft, possibilitou-me avançar na realização do
projeto, tendo sido possível, perante as dificuldades surgidas, esclarecê-las com
profissionais da área, mais especificamente, pelo programador e grande pessoa, Mário
Constantino.
O projeto baseou-se na construção de uma rede social, passando pelas várias
fases de construção como a elaboração de um logótipo próprio, desenvolvimento de
uma aplicação móvel para sistemas operacionais Android e desenvolvimento de um site,
básico, onde visa mostrar e promover o produto.
Inicialmente esbocei todo o processo de construção com a utilização do
programa Gantt Project, realizei um plano de trabalho, permitindo-me uma melhor
organização e planificação do projeto.
Na elaboração da prova de aptidão profissional utilizei um software ensinado no
decorrer da formação em contexto de trabalho e no curso: Adobe Photoshop C5.1, o
Visual Studio Community 2015, o Microsoft SQL Server 2012 e o Sublime Text 3.
7
Softwares utilizados
Para a realização da Prova de Aptidão Profissional, utilizei o Adobe Photoshop
CS5.1 na criação dos estudos de layout, onde criei vários layouts tanto para a aplicação
móvel como para o website, usei o Gantt Project para distribuir as tarefas por etapas,
permitindo-me estar organizado e ter tudo planeado como deve ser.
Para construir a aplicação móvel Android, utilizei o Xamarin com integração no
Visual Studio Community 2015, que permite programar, tanto para Android como para
iOS, em C#, em vez da linguagem nativa de cada um. Logo, a linguagem que usei para
a realização da aplicação móvel foi C#, que é uma linguagem de programação orientada
a objetos que foi desenvolvida pela Microsoft como parte da plataforma .NET. A sua
sintaxe orientada a objetos foi baseada no C++, mas inclui muitas influências de outras
linguagens de programação, como Pascal e Java.
Como se trata de uma rede social necessita de uma base de dados, e para isso
usei o Microsoft SQL Server 2012, onde guardei a minha base de dados com os dados
dos utilizadores.
Por último, utilizei, para a construção do website de apresentação e divulgação
da rede social, o Sublime Text 3. Programei o site em HTML (Hyper Text Markup
Language), que é uma linguagem de marcação utilizada para produzir páginas na Web,
e para construir a interface gráfica, ou melhor dizendo, para enquadrar estéticamente o
site, como é óbvio, programei 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.
8
Disciplinas importantes para a realização do projeto
Ao longo dos três anos de curso, houve disciplinas, de entre todas, duas que,
essencialmente, me permitiram realizar o meu projeto, que desenvolvi, principalmente
durante o último ano letivo, mas que teve início já no fim do 10º ano.
Essas disciplinas foram Sistemas de Informação (S.I.), onde comecei a aprender
programação web, HTML, CSS e JavaScript, e Preparação Projeto Multimédia (PPM),
onde pude desenvolver a minha aplicação, visto ter ficado sem computador, e sem esta
disciplina, muito dificilmente teria conseguido concluir o projeto.
A formação em contexto de trabalho permitiu-me, acima de tudo, aprender uma
nova linguagem de programação (C#), completamente diferente de tudo o que já tinha
feito orientada a objetos e dedicada à construção de sofwares. Aprendi, também, a usar
o Visual Studio, que foi sem dúvida uma mais-valia para o desenvolvimento de todo
este projeto.
9
O Nascer da Rede Social
A ideia nasceu da necessidade de criar um projeto para final de ano do curso e
do querer criar algo que pudesse ser usado por todo o mundo.
O produto é uma rede social, na qual as pessoas vão poder partilhar as suas
roupas e pedir a opinião dos seus seguidores em tempo real.
O nome LookMyClothes surgiu após a ideia e procura de um domínio com vaga.
A palavra Look, traduzida para português, significa olhar, a palavra My significa
meu/minha e a palavra Clothes significa roupas, tudo junto pode-se ler "Olha Para as
Minhas Roupas".
O nome da rede social está em inglês, pois permite alcançar o mercado
internacional e ter a compreensão de um maior número de utilizadores, sendo que a
língua mais falada no mundo é inglesa, e sendo o nome, também, fácil de compreensão,
não é preciso ser-se um génio em inglês para saber o seu significado.
Com a minha rede social, pretendo ter como público todos aqueles que têm um
smartphone com o sistema operativo Android, abrangendo todas as faixas etárias e todo
o género de pessoas.
Sendo uma rede social, é de notar, que nunca existirá uma versão final, pois há
sempre ideias a aparecer e existe sempre algo que se pode mudar alterar e melhorar.
10
Anteprojeto
O anteprojeto consistia no pré-plano da prova de aptidão profissional, no
ficheiro apresentei o tema, uma descrição sumativa e os objetivos que me propus
alcançar na realização.
Tive como principais objetivos, dos que referi, a colocação do projeto online,
fazer uma aplicação móvel, fazer um website, criar uma nova rede social, que ainda não
existisse e a possibilidade de me abrir portas no futuro da programação.
O anteprojeto pode ser consultado nos anexos onde apresentei o ficheiro
completo com todos os pormenores que implementei no início de todo este projeto.
Gantt Project
O Gantt Project inclui um diagrama com a calendarização das tarefas e recursos.
Possibilitando-me, assim, planificar o meu tempo para a realização de cada trabalho.
Briefing
No dia 22 de Setembro de 2015 dei início ao projeto e comecei a Investigação.
Nesta fase deu-se a pesquisa de informação. Procurei conteúdo e informações existentes
para analisar o que poderia fazer de novo.
Após a investigação, passei para a Ideia, decidi que iria fazer uma rede social
onde se partilhava roupa para pedir a opinião dos amigos.
No dia seguinte, 23 de setembro de 2015, ao voltar a trabalhar deparei-me com
um problema. Como haveria de "educar" os utilizadores que a rede social serviria para
partilhar roupa?
Depois de pensar muito em maneiras de resolver o problema, cheguei à conclusão que
no site iria ter que expor o conceito da rede, informando assim os utilizadores sobre o
funcionamento.
11
Eleição do Nome
Sendo uma rede social e o objetivo ser utilizada pelo mundo todo, o nome teria,
quase que obrigatório, de ser em inglês. Assim sendo fui procurar domínios disponíveis,
em http://www.dominios.pt, para não ter problemas com direitos de autor.
Inicialmente queria que se chamasse MyClothes, mas já estava a ser usado, por
isso, e não saindo do estilo de nome, simplesmente acrescentei Look, ficando
LookMyClothes.
Como expliquei anteriormente o nome da rede social permite alcançar o
mercado internacional e ter a compreensão de uma maioria, sendo fácil de compreensão.
12
Logótipo
Construção
Depois da escolha do nome, lembrei-me logo que o logo teria que ter um olho,
pois achei que seria uma boa ideia.
Cor
Após andar a pesquisar sobre cores, descobri que o azul era uma cor calma e que
o seu uso não era em vão, sendo apelativo para o utilizador. Mas, mesmo assim, não
quis usar o azul, queria experimentar o amarelo, mas como o snapchat era amarelo
achei que não seria uma boa escolha, por isso escolhi o verde.
O verde-escuro corresponde na paleta de cores CMYK ao (C=87 M=20 Y=94
K=6), paleta de cores RGB ao (R=0 G=141 B=75) e ao RGB WebSafe #008d4b. O
verde-claro corresponde na paleta de cores CMYK ao (C=85 M=13 Y=92 K=1), paleta
de cores RGB ao (R=0 G=156 B=83) e ao RGB WebSafe #009c53.
13
Rede Social
Aplicação Móvel
14
A página principal da aplicação móvel serve para as pessoas fazerem o Login e
tem um botão para que direciona a página para a página de registar.
Os campos necessários para “iniciar Sessão” são: o username e a palavra-passe.
O botão de “Login” encontra-se em maior destaque já o botão de “Registar” está
com o tamanho de letra menor e em baixo do botão de “login”.
Na página de “Registar” é preciso escrever o nome, username, email, data de
nascimento, género e palavra-passe. Sendo que a palavra-passe é preciso escrever duas
vezes, pois precisa de ser confirmada.
Ao iniciar sessão somos redireccionados para a página inicial, onde aparece
todas as partilhas feitas pelas pessoas que o utilizador está a seguir.
Em cada partilha temos a opção de votar entre várias fotos, caso seja o caso, e
comentar, se a partilha só tiver uma foto só irá dar a opção para comentar.
O utilizador pode pesquisar por outro utilizador clicando no botão da “Lupa”.
Há duas formas de ir parar ao perfil dos utilizadores. Pode-se clicar no username
de um utilizador numa partilha que tenha feito, ou mesmo, através de uma pesquisa. Já
o perfil do utilizador que está com sessão iniciada, pode ver o seu perfil, clicando no
botão “Pessoa”.
Dentro do perfil de um utilizador encontramos um botão “Seguir” ou “A
Seguir”, de acordo com a relação entre os utilizadores, e no perfil do utilizador com
sessão iniciada encontramos um botão “Conta” na qual o utilizador pode alterar os seus
dados.
15
Conclusão
Este projeto sofreu muitas alterações desde o primeiro esboço até à versão atual. O
primeiro plano era construir uma aplicação para iOS, sistema operativo móvel dos dispositivos
da Apple, mas assim que pesquisei descobri que era preciso ter um computador da Apple, por
isso decidi mudar para Android. Como tinha aprendido C# durante o meu estágio do 11º ano,
não programei em JAVA, linguagem nativa do Android. Depois tinha o plano de ter um
website, que permitisse a consulta dos conteúdos, não daria para registar, apenas iniciar
sessão e ver as partilhas feitas e o perfil.
E assim tinha ficado o meu plano para esta P.A.P. só que por volta de janeiro
aconteceu-me ter ficado sem computador, o que veio alterar todos os planos que tinha.
O website, como era para ser feito em casa, ficou pelo caminho assim como as
features que aplicação era para ter.
Tive que voltar a planear tudo, de forma a conseguir ter a minha aplicação a funcionar
antes do dia da entrega e, claro, da apresentação.
Comecei a desenvolver a aplicação durante o estágio, com a autorização do meu
monitor, onde desenvolvi 80% da aplicação. Se não tivesse começado a desenvolver nessa
altura, não teria o que tenho hoje. E aqui tenho que agradecer ao Mário Constantino, porque
sem ele nada do que sei e tenho implementado na aplicação seria possível.
Quando que acabei o estágio e voltei para a escola, pensava que a parte mais difícil já
estava feita, na realidade estava, mas mais problemas se puseram pelo caminho.
Começaram os problemas quando chego e o computador onde trabalho estava cheio,
ou seja, tinha o disco rígido com 3 ou 4 GigaBytes livres, tive que começar a limpá-lo para que
pudesse começar a trabalhar, instalado os programas que necessitava, como o Visual Studio
Community 2015. Entre desinstalações, limpeza no disco e instalações passou 3 semanas.
Para que conseguisse trabalhar sem interrupções pedi à professora Alice Pereira se me
podia criar uma conta com permissões de administrador, o que foi aceite e deu muito jeito.
A seguir precisava de ter um IP de rede fixo para conseguir aceder ao localhost no meu
smartphone e ir testando a aplicação, não consegui ter, pois a rede da escola não funciona
assim. Então tive que ir desenvolvendo, sem saber se tudo o que estava a implementar estava
100% correto.
Com tudo o que me aconteceu, não tive o tempo que tinha planeado para esta “2ª
versão de P.A.P.”, tive que utilizar tempo fora do período escolar, para conseguir ir acabando o
que faltava, como o Relatório, que tive a ajuda da professora Teresa Fazenda.
Ainda tive esperança de poder testar a aplicação antes da entrega, pois os projetos
iriam ser postos online, como o meu projeto requeria um servidor com SQL Server e que nos
estavam a disponibilizar só tinha MySql, não foi possível fazer os tais testes que queria ter
16
feito.
Pondo todos os problemas de lado, acho que consegui desenvolver uma aplicação com
um grande potencial, sei que não está esteticamente bonito, mas está funcional que era o que
queria que estivesse, no mínimo. Sendo eu mais da parte da programação, apostei mais na
parte da programação deixando o design mais em 2º plano.
Agora falando mais da rede social e do futuro que quero e espero que tenha.
Uma rede social nunca é um projeto acabado, está sempre em constante
desenvolvimento, e a minha não é diferente.
Eu não quero, de todo, que a rede social acabe no final da minha apresentação, muito
pelo contrário, quero continuar a desenvolver e fazer dela o próximo Instagram, não o
substituindo como é óbvio, até porque são conceitos diferentes, mas atingindo o número de
utilizadores a popularidade.
Gostaria um dia de ter a minha empresa e conseguir um parceiro financeiro que
acreditasse tanto no projeto como eu acredito e que quisesse, também, apostar e fazer crescer
esta rede social.
17
Anexos Primeiros Estudos de Layout
WebSite
18
19
20
21
Aplicação Android
22
Segundos Estudos de Layout
23
WebSite
24
Aplicação Android
25
Terceiros Estudos de Layout
Aplicação Android
26
Modelo Gantt
27
28
29
30