Embed Size (px)
Citation preview
Escola Básica e Secundária de Salvaterra de Magos
RELATÓRIO CRÍTICO
Prova de Aptidão Profissional
Delfim Pais Lopes
Curso Profissional Técnico de Programação e Gestão
de Sistemas Informáticos
12º H Nº 6
Salvaterra de Magos
Junho de 2018
2
Escola Básica e Secundária de Salvaterra de Magos
Delfim Pais Lopes
Curso Profissional Técnico de Gestão e Programação
de Sistemas Informáticos
12º H Nº 6
SUMÁRIO
Relatório das atividades do Projeto Monte
Selvagem, desenvolvido como requisito parcial dos
módulos curriculares, supervisionado pelos Prof. José
Nunes, Prof. António Andrade e Prof. Sónia Santos no
curso Profissional Técnico de Gestão e Programação de
Sistemas Informáticos.
Salvaterra de Magos
Junho de 2018
3
Agradecimentos
Durante o desenvolvimento da minha Prova de Aptidão Profissional, foram muitas as pessoas
que se envolveram, de diversas formas, com o projeto escolhido por mim.
Gostaria de agradecer ao Prof. José Nunes por todo o empenho em ajudar na realização da
minha Prova de Aptidão Profissional, à Prof. Sónia Santos pela disponibilidade prestada como
Diretora de Curso e professora acompanhante das PAPs, ao Prof. António Andrade pela sua
atenção e preocupação durante estes meses de desenvolvimento do projeto e, por fim, à Prof.
Fátima Ferreira pela sua ajuda e empenho na área de design que abrangeu o meu projeto.
Gostaria de agradecer também ao Monte Selvagem, especialmente à Eng. Ana Paula e ao Dr.
Diogo Gouveia, proprietários e responsáveis pelo parque, pela oportunidade de conseguir
incorporar o Monte Selvagem na minha Prova de Aptidão Profissional.
Agradeço também ao meu pai, mãe e irmã por me motivarem nesta área e incentivarem,
sempre com o objetivo de evolução e ambição, por não me deixarem desistir e acima de tudo
por terem sido uma peça fundamental no desenvolvimento do meu projeto e na
disponibilidade em me darem opiniões, não como família, mas como observadores do meu
website e aplicação móvel.
Por fim, queria agradecer aos meus amigos por me motivarem a ultrapassar as inúmeras
dificuldades com as quais me deparei no desenvolvimento da minha PAP, por não me
deixarem desistir e acima de tudo por me ajudarem a me ultrapassar.
4
Índice
Introdução
Desenvolvimento
Apresentação do Cliente
Apresentação do Tema
Objetivos do Projeto
Fase de Pesquisa
Ferramentas Utilizadas
Noções de Laravel
Noções de Android Studio
Noções de XML aplicadas ao android
Fase Inicial
Tipologia de árvore
Desenvolvimento do BackOffice
Desenvolvimento do Website
Noções de Inbound Marketing
Páginas aplicadas no Website
Desenvolvimento da Aplicação para Telemóvel
Activitys e Fragments
Activitys e Fragments desenvolvidos
Tratamento da composição gráfica
Conclusão
5
Apresentação do Cliente
A minha prova de aptidão profissional foi desenvolvida no âmbito de satisfazer o cliente.
Neste preciso caso: o Monte Selvagem.
O Monte Selvagem é um parque natural, situado em Lavre, que aloja cerca de 60 espécies e
cerca de 350 animais. Está aberto ao público de Fevereiro a Outubro.
Tem como missão oferecer aos animais habitats alternativos e promover o contato das
populações com a Natureza, protegê-la, conservá-la e educar para a sua sustentabilidade.
O Parque tem diversas atrações de lazer: passeios de trator, uma quinta que permite contato
direto com os animais, alimentação das espécies, expedições, escorregas e balouços gigantes.
Figura 1- Logótipo do Monte Selvagem
6
Apresentação do Tema
O tema da minha PAP baseia-se num BackOffice que controla um Website e uma aplicação
para telemóvel.
Sendo assim o projeto deve respeitar as seguintes restrições:
● BackOffice
o Gerir a manipulação da base de dados;
o Recolher estatísticas de dados.
● Website
o Ter uma estrutura SEO (Search Engine Optimize);
o Possibilidade de reservar visitas ao parque;
o Permitir o contato do visitante com a gerência do parque;
o Apresentar um leque de informação sobre o Monte Selvagem.
● Aplicação de Telemóvel
o Apresentar todas as informações dos animais (habitat, quantos existem no
parque, etc…);
o Reservar visitas ao parque;
o Apresentar um mapa do Monte Selvagem;
o Notificar o utilizador de possíveis eventos no parque.
7
Objetivos do Projeto
A minha Prova de Aptidão Profissional tem como objetivo promover e divulgar o Monte
Selvagem, assim como atrair visitantes e facilitar a comunicação Cliente-Gerência.
8
Fase de Pesquisa
A fase de pesquisa prendeu-se na procura de informações para o preenchimento da base de
dados, perceber qual o software indicado para desenvolver a PAP e perceber as necessidades
dos clientes. Desta forma, consegui perceber qual a forma mais correta para construir a minha
prova de aptidão profissional.
Após vários testes em softwares como: Xamarin, PhoneGap e linguagens como: Java, C# e
C++, concluí que a melhor forma de desenvolver a PAP seria com as seguintes linguagens e
softwares: Android Studio com Java e XML para a aplicação telemóvel, Php, Html, CSS e a
framework Laravel para o website e respectivo BackOffice, e por fim, usei Mysql para a
manipulação da base dados.
9
Ferramentas Utilizadas
Segue então uma lista de todos os programas utilizados no desenvolvimento da minha prova
de aptidão profissional:
● Website e BackOffice
○ Editor de Código: Atom e Notepad++
● Aplicação Móvel
○ Android Studio
○ SDK
● Manipulação de Base de Dados
○ Laragon (quando o projeto ainda se encontrava em servidor local)
● Ligação ao Servidor
○ FileZilla
1) Noções de Laravel
Laravel é um framework que nos permite um desenvolvimento rápido de PHP e de forma
estruturada. Este framework utiliza um sistema de routes que tornam os URLs mais
apelativos, normalmente designados por pretty urls. Como compilador de templates Laravel,
usa-se o Blade, que tem como principal objetivo reduzir a quantidade de código e permitir ao
programador uma maior liberdade de programação.
Dentro do Laravel ainda é possível encontrar várias funcionalidades como por exemplo: o
Eloquent (ORM) e o Query Builder.
10
2) Noções de Android Studio
O Android Studio é um software de desenvolvimento para aplicações móveis Android
desenvolvidas em Java e XML. Este programa utiliza uma fonte de objetos que facilitam a
programação orientada aos mesmos. Para além disso, com a sua instalação podemos adquirir
uma vasta biblioteca em Activitys e framelayouts, como por exemplo: sistema de login,
sidebar ou até uma bottombar.
3) Noções de XML aplicadas ao android
Extensible Markup Language (XML) aplicado ao android studio é uma linguagem que nos
permite alterar o estilo, posição e até o conteúdo de um determinado objeto. Sendo assim, o
XML torna-se uma linguagem indispensável para desenvolver o design da aplicação.
11
Fase inicial
O projeto começou pelo desenvolvimento da base de dados.
Para a sua construção e após alguns estudos de mercado, onde se podem observar os
comportamentos dos clientes em relação ao Monte Selvagem, concluí que para construir a
base de dados teria que unir as necessidades do visitante às funcionalidades do projeto.
Por fim, a base de dados ficou finalizada de acordo com o esquema:
1) Tipologia de árvore
Segundo ficou estruturado, o website e a aplicação móvel têm que ter uma tipologia baseada
numa árvore, ou seja: o topo/início tem que ter características relacionadas com a cor verde,
representando as folhas de uma árvore e a parte de baixo/fim tem que ter características
relacionadas com a cor castanho, representando um tronco. Estas cores são possíveis de
observar, por exemplo, no website onde os componentes giram à volta do verde no início e o
footer tem um tom acastanhado.
Passada a fase da planificação da base de dados e da tipologia, seguiu-se então a planificação
das páginas do website. Esta planificação contém todas os componentes das respetivas
páginas e a forma mais correta de as alinhar.
Figura 2 - Esquema da Base de Dados
12
Figura 3 - Planificação da página "Entretenimento"
Figura 4 - Página "Entretenimento"
13
Figura 5 - Planificação da página "Início"
Figura 6 - Página "Início"
14
Desenvolvimento do BackOffice
Como já referido o BackOffice tem como função e funcionalidade a pesquisa e manipulação
da base de dados. Sendo assim, para começar, criei uma página de login de modo a que os
utilizadores fossem filtrados consoante o seu nível. Por isso, apenas os utilizadores com o
nível denominado de “Administrador” (nível 1 na base de dados) conseguem aceder a esta
parte de administração. Os restantes são todos encaminhados de volta para a página “Início”,
onde podem realizar todas as funções que estejam ligadas à manipulação da base de dados
(exemplo: realizar uma reserva).
Figura 7 - Página de Login
Ao efetuar o Login o administrador depara-se com a página inicial de administração, onde é
possível visualizar as informações bases do parque agrupadas em “caixas” (exemplo: número
de animais no parque, número de eventos nos próximos 30 dias, números de posts no blog,
quais as próximas reservas, entre outros).
A partir desta página é possível navegar pelas páginas incluídas no BackOffice.
15
Figura 8 - Página Inicial de Administração
Para a gestão das tabelas, organizadas pelas respetivas abas (gerir animais, gerir blog, etc...),
criei a partir do sistema CRUD (Create, Read, Update e Edit), três páginas que me
permitissem satisfazer estas ações. Estas páginas são todas comuns às abas existentes, apenas
alterando o formulário e campos.
Figura 9 - Páginas "Gerir Espécies" e “Adicionar Espécies”
Figura 10- Páginas "Editar Espécie" e "Visualizar Espécie"
16
Por fim, no BackOffice, temos também a página “Perfil” que nos permite editar o perfil de
utilizador e mudar todos os campos necessários.
Figura 13 - Página "Perfil"
Figura 11 - Página "Gerir blog" e "Adicionar Post"
Figura 12 - Página "Editar Post"
17
Desenvolvimento do Website
Quando planifiquei o website, percebi que podia unir os conhecimentos adquiridos na minha
Formação em Contexto de Trabalho do 11º ano com os interesses do Monte Selvagem.
Aquando do mesmo, frequentei, por sugestão dos monitores de FCT, uma formação de
HubSpot Academy. Esta formação revelou-se fundamental na aplicação dos pressupostos de
Inbound Marketing.
Tendo em conta o Inbound Marketing, apliquei estratégias de SEO e produção de conteúdos,
cuja principal função é atrair clientes e visitantes.
1) Noções de Inbound Marketing
O Inbound Markting é um conjunto de técnicas e estratégias que visam atrair e converter
clientes. Este método divide-se em quatro fases: atrair, converter, fechar e manter.
De forma mais clara e sucinta segue um esquema de alguns exemplos em que estas etapas se
podem aplicar:
(1) Landing Pages - Página única que é desenhada de modo a que o visitante efetue uma ação específica.
(2) Leads - Potencial cliente da marca que demonstrou interesse em consumir os produtos/serviços.
•Blogs•Redes Socias•Palavras-Chaves•Otimização
Atrair
•Call-to-Action•Landing Pages(1)
•Formulários•Contactos
Converter•E-mail•CRM•Atendimento •Nutrição de leads(2)
Fechar
•Redes Sociais•Calls-to-Action
influentes•Compartilhamentos
Manter
18
De forma a que a administração do Monte Selvagem evolua no Inbound Marketing, cabe ao
construtor do site efetuar as ações necessárias para isso.
O primeiro passo foi estruturar as páginas do meu website aplicadas ao SEO (Search Engine
Optimize).
Portanto, o SEO pertence à primeira fase do Inbound Marketing e tem como objetivo
posicionar melhor as páginas do website nos motores de busca. Alguns dos mecanismos que
podem ser usados são:
• Títulos em H1
• Trabalhar as palavras-chaves ao longo da página
• Otimizar as Imagens
• Uso de Meta Tags
• Trabalhar os textos
• Otimizar as páginas para diferentes tipos de ecrãs
Figura 14 - Uso do H1 em títulos
Figura 15 - Uso das Meta tags
19
2) Páginas aplicadas no Website
As páginas que criei para completar o website, de forma a cumprir todas as funcionalidades
foram:
• Início
• Login
• Registo
• História do Parque
• Mapa do Parque
• Entretenimento
• Bilheteria
• Blog
• Estrutura dos posts do Blog
• Contatos
a) Início
Esta página permite receber a informação dos últimos posts do blog, proporciona uma
promoção das outras páginas incluídas no website. Permitindo ainda visualizar as
últimas fotografias postadas no Instagram que contenham a hastag #monteselvagem.
Menu em versão de
ecrãs menores
Figura 16 - Página "Blog" em ecrãs menores
20
Todas as páginas são
acompanhadas por um banner, ou
seja, uma imagem inicial com o
tema da página.
Esta breve descrição permite
gerar curiosidade no utilizador,
incentivando a navegação pelo
website.
Esta secção, tal como a descrição
da página “Sobre”, gera
curiosidade no visitante,
promovendo ao mesmo tempo o
Blog.
Este carrossel, tem como
funcionalidade a promoção de
alguns entretenimentos que
existem no website.
Figura 17- Página Início - Banner
Figura 18 - Página "Início" - Promoção da página "Sobre"
Figura 19 - Página "Início" - Últimos Posts
Figura 20 - Página "Início" - Carrossel
21
Esta secção incentiva o utilizador a
usar a própria hastag de forma a
poder partilhar as suas próprias fotos
no website.
b) Login e Registo
Estas páginas têm como função registar e iniciar a sessão do utilizador de modo a que possa
usufruir de todas as funcionalidades do website.
Figura 22 - Página de Registo
Figura 21 - Página "Início" - Promoção à #monteselvagem no Instagram
22
Figura 23 - Página de Login
c) História do Parque
A página “História do Parque” permite ao visitante conhecer um pouco mais da história do
Monte Selvagem.
Figura 24 - Página "História do Parque”
23
Figura 25 - Página "História do Parque”
Figura 26 - Página "História do Parque”
d) Mapa do Parque
Esta página permite ao utilizador descarregar o mapa do Monte Selvagem.
24
Figura 27 - Página "Mapa do Parque"
Figura 28 - Página "Mapa do Parque" –Imagem do Mapa
25
e) Entretenimento
Esta página apresenta ao visitante todos as atrações e atividades que o Monte Selvagem pode
proporcionar.
Figura 29 - Página "Entretenimento"
Figura 30 - Página "Entretenimento"
26
Figura 31 - Página "Entretenimento"
Figura 32 - Página "Entretenimento"
27
Figura 33 - Página "Entretenimento"
f) Bilheteira
Esta página permite aos utilizadores consultar os preços dos bilhetes ou até realizar a sua
reserva.
Figura 34 - Página "Bilheteira"
28
Figura 35 - Página "Bilheteira"
Figura 36 - Página "Bilheteira" - Sem sessão iniciada
29
Figura 37 - Página "Bilheteira" - Com sessão iniciada
g) Blog
O Blog tem como principal funcionalidade dar a conhecer ao visitante todos os posts que a
administração do Monte Selvagem entenda criar. Os posts são, sem dúvida, as páginas que
devem respeitar o SEO.
Figura 38- Página "Blog"
30
Figura 39 - Página "Blog"
Figura 40 - Página de post aleatório
31
Figura 41 - Página de post aleatório
h) Contactos
Esta página informa ao utilizador todos os contactos possíveis e a localização do
Monte Selvagem.
Figura 42 - Página "Contatos"
32
Figura 43 - Página "Contactos"
Figura 44 - Página "Costactos"
33
Desenvolvimento da aplicação para telemóvel
1) Activitys e Fragments
Após as funcionalidades estarem definidas, passei então para a elaboração das janelas da
aplicação. Teoricamente, as janelas são definidas pelas activitys do Android Studio, porém
percebi que a melhor maneira de construir a aplicação seria com um esquema de fragments na
mesma activity. Para explicar melhor, imaginemos as situações:
• Numa determinada aplicação, contemos as activitys A, B e C, no momento em que a
activity A está aberta e tentamos aceder à activity B, a aplicação irá fechar a activity A
e iniciar a B. Se mais tarde quisermos aceder à activity C, a aplicação fechará a
activity B e iniciar a C.
• Numa determinada aplicação, contemos a activity 1, e os fragments A, B, C, esta
activity 1 é a única que é usada, e os fragments funcionam como “background
interactivo”, consoante os fragments iniciados.
Activity A
Activity B
Activity C
Activity1
Fragment A
Fragment B
Fragment C
34
Desta forma, o objetivo é reduzir o tempo de processamento e o esforço exigido ao
dispositivo.
2) Activitys e Fragments desenvolvidos
Esta página de login, permite ao utilizador iniciar a sua sessão na
aplicação.
Esta sidebar oferece ao utilizador a liberdade de explorar a
aplicação como entender.
35
Esta página permite ao utilizador conhecer um pouco mais da aplicação e promover as outras
janelas.
Tal como no BackOffice a estrutura das listagens e manipulação de dados mantêm-se as
mesmas, mudando apenas os campos e o conteúdo muda de aba para aba.
Figura 45,45,46 – Inicio
Figura 46 - Listagem das Espécies Figura 47 e 46 - Conteúdo da Espécie "Crocodilo do Nilo"
36
Esta página permite ao utilizador efectuar uma reserva e deixar o seu
contacto, no âmbito de uma futura confirmação.
Ao clicar na aba “QRcode” a aplicação abre o
leitor de código e a partir daí lê o QRCode e
mostra a respetiva espécie.
A aplicação conta ainda com outras abas, nomeadamente:
• Casos – Animais que trazem uma história consigo, por exemplo, um resgate de maus-
tratos.
• Animais - Animais que possuem um nome e dados específicos.
• Eventos - Eventos que podem ocorrer no parque, por exemplo, uma atividade especial
para festejar o Dia do Pai.
Figura 48- Página de Reserva
Figura 49 - Leitor de QRCode
37
Desenvolvimento da composição gráfica
Figura 50 - Desenvolvimento da imagem "Saguim"
Figura 51 - Finalização da imagem "Saguim"
38
Figura 52 - Desenvolvimento da imagem "Leia os casos" (aplicação android)
Figura 53- Finalização da imagem "Leia os casos" (aplicação android)
39
Conclusão
Com a conclusão da Prova de Aptidão Profissional, concluí que, segundo a matéria lecionada
nas aulas e por pesquisa autónoma, todos os objetivos foram cumpridos e ultrapassados com
trabalho e dedicação.
Porém, enfrentei algumas dificuldades, nomeadamente na escolha de um software de
desenvolvimento android e no principio da fase de desenvolvimento do BackOffice, quando
não dominava o Laravel a cem por cento.
Como aspetos positivos, recolho uma grande preparação para o mercado de trabalho em
relação a Laravel, PHP, Html, Java, XML e MYSQL.
Durante o desenvolvimento da minha Prova de Aptidão Profissional, pude perceber que não
podia ter escolhido melhor escola para concretizar o curso e que existe uma ligação de ajuda
em relação ao corpo docente, que se demonstrou bastante interessado nas Provas de Aptidão
Profissional.
