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 1
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 2
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. 3
Í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 4
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. 5
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. 6
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. 7
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. 8
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. 9
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. 10
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. 11
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. 12
Rede Social Aplicação Móvel 13
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. 14
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 15
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. 16
Anexos Primeiros Estudos de Layout WebSite 17
18
19
20
Aplicação Android 21
Segundos Estudos de Layout 22
WebSite 23
Aplicação Android 24
Terceiros Estudos de Layout Aplicação Android 25
Modelo Gantt 26
27
28
29
30