rafael césar sousa brites – a28335projinf.estig.ipb.pt/~a28335/relatorio/closet_report.pdf · it...

59
Erro! Autorreferência de marcador inválida. Rafael César Sousa Brites – a28335 Trabalho realizado sob a orientação de Isabel Maria Lopes Informática de Gestão

Upload: doandieu

Post on 26-May-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

Erro! Autorreferência de marcador inválida.

Rafael César Sousa Brites – a28335

Trabalho realizado sob a orientação de

Isabel Maria Lopes

Informática de Gestão

The Closet
Page 2: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

iii

Page 3: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

Erro! Autorreferência de marcador inválida.

Relatório da UC de Projeto de Informática Licenciatura em Informática de Gestão

Escola Superior de Tecnologia e de Gestão

Rafael Brites

2016/2017

The Closet
Page 4: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

v

A Escola Superior de Tecnologia e Gestão não se responsabiliza pelas opiniões expressas neste relatório.

Page 5: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

Certifico que li este relatório e que na minha opinião, é adequado no seu conteúdo e forma como demonstrador do trabalho desenvolvido no âmbito da UC de Projeto de Informática. ___________________________________________ Maria Isabel Lopes Orientador Certifico que li este relatório e que na minha opinião, é adequado no seu conteúdo e forma como demonstrador do trabalho desenvolvido no âmbito da UC de Projeto de Informática. ___________________________________________ Arguente Aceite para avaliação da UC de Projeto de Informática

Page 6: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

vii

Page 7: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

viii

Dedicatória

Dedico este trabalho à minha mãe, aos meus irmãos e a toda a minha família quem com muito

carinho e apoio, não mediram esforços para que eu chegasse até esta etapa da minha vida

À minha família por terem acreditado e investido em mim desde o inicio.

Aos meus amigos e colegas pelo incentivo e apoio.

Page 8: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

ix

Page 9: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

x

Agradecimentos

Agradeço à professora, e nossa orientadora, Isabel Maria Lopes, pela confiança ao longo das

supervisões do meu progresso durante a realização deste projeto.

Agradeço também aos professores do curso, por me proporcionar o conhecimento não apenas

racional, mas a manifestação de caráter e afetividade da educação no processo de formação

profissional.

Agradeço também a minha mãe por me ter suportado durante este processo, por ter acreditado

em mim desde o inicio e nunca ter desistido.

Page 10: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xi

Page 11: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xii

Resumo

Palavras-chave: internet, Loja, CMS, OpenCart, website, plataforma

A Internet revolucionou os modelos do negócio e criou novas oportunidades. Uma delas é, sem

dúvida, o comércio eletrónico. Ora vejamos, hoje em dia, basta criar uma loja online para que

possamos comprar e vender o que quer que seja. Basta meia dúzia de cliques e, alguns dias

depois, o produto chegará a nossas casas.

Enquanto que uma loja local tem a sua ação limitada a um espaço geográfico relativamente

reduzido que corresponde, mais ou menos, à sua cidade, mas as lojas online têm o potencial

para conquistar o mundo.

The Closet é uma loja online baseada no CMS OpenCart que é uma plataforma e-commerce

open-source, desenvolvida em PHP, criada com o objetivo de funcionar como uma loja online.

O projeto The Closet é uma plataforma com um design moderno e responsivo, adaptando-se

aos dispositivos moveis como smarthphones e tablets. É uma plataforma completa, com front-

end e Back-end com muitas ferramentas disponíveis para o gestor da loja assim como para o

cliente.

Utilizando tecnologias recentes e inovadoras o projeto The closet está pronto para enfrentar o

mercado de comercio online presente nos dias de hoje.

Page 12: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xiv

Page 13: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xv

Abstract

Keywords: internet, store, CMS, OpenCart, website, platform

The Internet has revolutionized business models and created new opportunities. One of them is

undoubtedly e-commerce. Let's see: nowadays, just create an online store so that we can buy

and sell whatever it is. Just half a dozen clicks and a few days later, the product will arrive at

our homes.While a local store has its sales limited to a relatively small geographic space, more

or less matching your city, but online stores have the potential to conquer the world.

The Closet is an online store based on the OpenCart CMS which is an open-source e-commerce

platform, developed in PHP, created with the aim of functioning as an online store.

The The Closet project is a platform with a modern and responsive design, adapting to the

mobile devices like smarthphones and tablets.

It is a complete platform with front-end and back-end offering a lot of tools for the store

manager as well as for the client.

Using recent and innovative technologies, The Closet project is ready to face the online

commerce market present today.

Page 14: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xvi

Page 15: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xvii

Conteúdo

1 Introdução .......................................................................................................................... 11.1 The closet ...................................................................................................................... 11.2 Objetivos ....................................................................................................................... 21.3 Motivação ..................................................................................................................... 21.4 Estrutura do relatório .................................................................................................... 3

2 Analise ao mercado e-commerce ...................................................................................... 52.1 Analise .......................................................................................................................... 5

2.1.1 Categorias .............................................................................................................. 62.2 Plataformas e-commerce .............................................................................................. 7

2.2.1 Shopify ................................................................................................................... 72.2.2 Magento ................................................................................................................. 82.2.3 OpenCart ................................................................................................................ 92.2.4 Prestashop ............................................................................................................ 102.2.5 Zen Cart ............................................................................................................... 11

3 Implementação da Plataforma ....................................................................................... 133.1 Linguagens utilizadas ................................................................................................. 133.2 Ferramentas utilizadas ................................................................................................ 14

4 Descrição e ilustração da Plataforma ............................................................................ 154.1 Estrutura ...................................................................................................................... 154.2 Funcionalidades .......................................................................................................... 164.3 Extensões .................................................................................................................... 184.4 Requisitos técnicos para utilizar a plataforma ............................................................ 194.5 Design do Logotipo .................................................................................................... 194.6 Ilustração da Plataforma Front-end ............................................................................ 20

4.6.1 Pagina inicial ........................................................................................................ 204.6.2 Pagina Produtos ................................................................................................... 214.6.3 Pagina contatos .................................................................................................... 224.6.4 Footer ................................................................................................................... 234.6.5 Mapa do site ......................................................................................................... 23

4.7 Ilustração da Plataforma Back-end ............................................................................. 244.7.1 Gestão de Produtos .............................................................................................. 254.7.2 Gestão de Categorias ............................................................................................ 264.7.3 Opções .................................................................................................................. 274.7.4 Informações .......................................................................................................... 28

Page 16: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

18

4.7.5 Gestão de Extensões ............................................................................................ 294.7.6 Gestão de Layouts ................................................................................................ 304.7.7 Gestão de vendas .................................................................................................. 314.7.8 Gestão de clientes ................................................................................................ 324.7.9 Marketing ............................................................................................................. 334.7.10 Definições ......................................................................................................... 344.7.11 Gestão de Relatórios ......................................................................................... 35

5 Conclusões ........................................................................................................................ 375.1 Conclusão ................................................................................................................... 375.2 Contributo pessoal ...................................................................................................... 38

Page 17: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xix

Lista de Figuras

Figura - 1 Shopify ..................................................................................................................................................... 7Figura - 2 Magento .................................................................................................................................................... 8Figura - 3 OpenCart .................................................................................................................................................. 9Figura - 4 Prestashop .............................................................................................................................................. 10Figura - 5 Zen Cart .................................................................................................................................................. 11Figura - 6 Design do logotipo - Photoshop ............................................................................................................. 19Figura - 7 Home page dividida em 2 partes ............................................................................................................ 20Figura - 8 pagina produtos ...................................................................................................................................... 21Figura - 9 pagina contatos ....................................................................................................................................... 22Figura - 10 Footer ................................................................................................................................................... 23Figura - 11 sitemap ................................................................................................................................................. 23Figura - 12 Dashboard da pagina de administração ................................................................................................ 24Figura - 13 Gestão de produtos ............................................................................................................................... 25Figura - 14 categorias .............................................................................................................................................. 26Figura - 15 Opções .................................................................................................................................................. 27Figura - 16 Informação ........................................................................................................................................... 28Figura - 17 Extensões .............................................................................................................................................. 29Figura - 18 Layouts ................................................................................................................................................. 30Figura - 19 Vendas .................................................................................................................................................. 31Figura - 20 Clientes ................................................................................................................................................. 32Figura - 21 Marketing ............................................................................................................................................. 33Figura - 22 Sistema ................................................................................................................................................. 34Figura - 23 Relatórios ............................................................................................................................................. 35

Page 18: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xx

Page 19: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

xxi

Lista de Abreviações CMS Content Management System XML Extensible Markup Language HTML HyperText Markup Language WEB World Wide Web� SQL Simple Query Language� PHP Hypertext Preprocessor MVC Model View Controller� URL Uniform Resource Locator B2B Business to Business B2C Business to Consumer C2B Consumer to Business C2C Consumer to Consumer MVC Model View Controllor

Page 20: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for
Page 21: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

1

Capítulo 1

1 Introdução

1.1 The closet

Este trabalho enquadra-se na Unidade Curricular de Projeto de Informática do curso de

Informática de Gestão, e com ele, pretende-se implementar uma loja de roupa online.

Existem varias opções para o desenvolvimento deste tipo de plataforma como por exemplo:

Shopify, Magento, OpenCart, Prestashop, osCommerce entre outros.

A Opção escolhida for o OpenCart por ser uma plataforma desenvolvida em PHP de código

aberto e licenciada nos termos da GNU General Public License.

O OpenCart possui uma ótima gestão de pedidos, múltiplos meios de pagamento e formas de

envio já embutidos, além de ser possível ainda expandir as suas funcionalidades através das

extensões, e personalizar sua aparência através de temas.

Page 22: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

2

1.2 Objetivos

O objetivo deste projeto é o desenvolvimento de uma plataforma digital que permita vender

artigos têxteis online.

Ao mesmo tempo pretende-se que esta plataforma tenha uma back-end poderoso para permitir

uma ótima gestão dos produtos assim como dos clientes de maneira a poder maximizar as

vendas e focar-se nos artigos mais importantes. Ao mesmo tempo que seja fácil de usar para o

utilizador.

O Front-end precisa de ser responsivo para funcionar com ecrãs de vários tamanhos de acordo

com os padrões de Web design atualmente praticados.

1.3 Motivação

O mercado de comercio online está a crescer de ano para ano, sendo o turismo o setor que mais

cresce na internet seguido por o setor do vestuário.

Agora é possível comprar o quer que seja com apenas um clique no computador ou num simples

Smarthphone.

A nível profissional esta competência é uma mais valia, derivado ao crescimento do mesmo.

Sendo assim este projeto motivante tanto a nível pessoal como profissional.

Page 23: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

3

1.4 Estrutura do relatório

Este relatório encontra-se divido em cinco diferentes capítulos:

§ Capítulo 1: Introdução do projeto, apresentação dos objetivos propostos e

motivações e também a estrutura do relatório. �

§ Capítulo 2: Análise ao mercado e-Commerce, as plataformas disponíveis e o que

as carateriza.

§ Capítulo 3: Breve descrição das ferramentas e linguagens utilizadas na

implementação da plataforma. �

§ Capítulo 4: Descrição e ilustração do modo de funcionamento da plataforma.�

§ Capítulo 5: Conclusões.

Page 24: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

4

Page 25: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

5

Capítulo 2

2 Analise ao mercado e-commerce

2.1 Analise

O comércio eletrônico refere-se à compra e venda de bens e /ou serviços via canais eletrônicos,

como a internet. O comércio eletrônico foi introduzido pela primeira vez em 1960 através de

um intercâmbio eletrônico de dados em redes de valor agregado. O meio cresceu com a maior

disponibilidade de acesso à internet e o advento dos populares vendedores on-line na década de

90 e no início dos anos 2000. A Amazon começou a operar como uma pequena empresa de

envios de livros na garagem de Jeff Bezos em 1995. O EBay, que permite aos consumidores

venderem produtos on-line, apresentou leilões online em 1995 e explodiu com o Frenesi Beanie

Babies de 1997.

Como qualquer tecnologia digital ou mercado de compras baseado no consumidor, o comércio

eletrônico evoluiu ao longo dos anos. À medida que os dispositivos móveis se tornaram mais

populares, o comércio móvel tornou-se no seu próprio mercado. Com o surgimento de sites

Page 26: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

6

como Facebook e Pinterest, as Mídias sociais se tornaram um importante motor do comércio

eletrônico. A partir de 2014, o Facebook levou 85% das vendas de vendas de redes sociais na

plataforma de comércio eletrônico Shopify, por Paymill. [4]

O mercado em mudança representa uma vasta oportunidade para as empresas melhorar sua

relevância e expandir seu mercado no mundo on-line. Os pesquisadores preveem que o

comércio eletrônico será de 17% das vendas de retalho nos EUA até 2022, de acordo com o

Digital Commerce 360. Os Americanos gastarão cerca de US $ 460 bilhões online em 2017.

Esses números continuarão a subir à medida que o uso de smartphone e internet se expandir

tanto nos EUA como no resto do mundo. [3]

2.1.1 Categorias

Tal como acontece com o comércio tradicional, existem quatro categorias principais de

comércio eletrônico: B2B, B2C, C2B e C2C.

B2B (business to business) - Envolve empresas que fazem negócios uns com os outros. Um

exemplo são os fabricantes que vendem para distribuidores e os distribuidores para retalhistas.

B2C (business to consumer) - Consiste em empresas que vendem ao público através de

plataformas online de vendas, sem necessidade de qualquer interação humana. Isso é o que a

maioria das pessoas pensa quando ouvem "comércio eletrônico". Um exemplo disso é Amazon,

E é esta a categoria onde este projeto (The Closet) se encontra.

C2B (consumer to business) - No comércio eletrônico C2B, os consumidores publicam um

projeto com um orçamento fixo on-line e as empresas participam no leilão de forma a obter o

projeto. O consumidor analisa as propostas e seleciona a empresa. Elance é um exemplo disso.

C2C (consumer to consumer) - Isso ocorre dentro de anúncios classificados, fóruns ou

mercados onde os indivíduos podem comprar e vender seus produtos. Exemplos disso são Olx,

Coisas e eBay. [5]

Page 27: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

7

2.2 Plataformas e-commerce

Lista de algumas das mais populares plataformas de lojas online. [1]

2.2.1 Shopify

Figura - 1 Shopify

No topo da lista está o Shopify uma das plataformas mais populares de comércio eletrônico,

por causa de sua fácil configuração, velocidade de carregamento mais rápida e gateways de

pagamentos seguros, além de modelos personalizáveis para todas as suas páginas de destino.

O Shopify também permite tags Meta personalizadas, sitemap XML gerado automaticamente

com suporte ao cliente superior para auxiliar os proprietários das lojas com chat, e-mail ou

telefone.

Page 28: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

8

2.2.2 Magento

Figura - 2 Magento

O Magento é uma plataforma de código aberto que pertence ao grupo eBay, e está entre as

plataformas com um crescimento mais rápido, com soluções de ponta para todo empresário que

quer maximizar o seu negocio com uma loja de comércio eletrônico.

Esta plataforma tem uma grande comunidade de programadores dispostos a contribuir com

recursos abrangentes para o desenvolvimento da loja online e faze-la destacar-se das restantes.

Page 29: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

9

2.2.3 OpenCart

Figura - 3 OpenCart

Uma das melhores opções para lojas online, o OpenCart é simples e eficaz, perfeitamente

projetado e tem uma gama ilimitada de produtos e categorias, classificações de produtos e

seções de revisão de produtos, incluindo múltiplas moedas e recursos de idiomas, e com uma

rede bastante vasta em extensões e módulos. Alem disso é open source e com atualizações

gratuitos.

Page 30: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

10

2.2.4 Prestashop

Figura - 4 Prestashop

O Prestashop está entre os principais nomes da indústria de comércio eletrônico, com muitas

empresas optando por suas avançadas funcionalidades de carrinho de compras de comércio

eletrônico. Disponível gratuitamente com dois pacotes, nomeadamente Prestashop baseado na

Cloud e para download.

Page 31: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

11

2.2.5 Zen Cart

Figura - 5 Zen Cart

Os gateways de pagamento flexíveis, seguros e aprimorados são alguns recursos associados ao

Zen Cart - um dos veteranos no negócio de comércio eletrônico.

Produtos em destaque com funcionalidades multilíngues e gateways de processamento de

pagamento seguro com base em Authorize.net, FirstData e PayPal.

Page 32: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

12

Page 33: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

13

Capítulo 3

3 Implementação da Plataforma

3.1 Linguagens utilizadas

Apesar do “core” da plataforma estar já desenvolvida, é preciso perceber as linguagens

utilizadas na mesma, de forma a poder personalizar toda a plataforma à medida do cliente/loja.

Para personalizar esta plataforma foram utilizadas várias linguagens assim como: HTML, CSS,

JavaScript, PHP e SQL.

O HTML é a sigla de HyperText Markup Language, expressão inglesa que significa

"Linguagem de Marcação de Hipertexto". Consiste em uma linguagem de marcação

utilizada para o desenvolvimento de páginas na web, que permite a criação de documentos que

podem ser lidos em praticamente qualquer tipo de computador e smartphone através da internet.

A linguagem HTML foi criada por Tim Barners Lee na década de 1990. As especificações da

linguagem são controladas pela W3C (World Wide Web Consortium). [8]

O CSS é uma linguagem utilizada para definir a apresentação de documentos escritos em

HTML. A sua principal vantagem é a separação entre o formato e o conteúdo de um documento,

isto é, em vez de colocar a formatação toda dentro do documento, cria-se uma ligação para um

ficheiro que contém todos os estilos para todos os elementos de uma página web.

O JavaScript, inicialmente implementado como parte dos navegadores web para que scripts

pudessem ser executados do lado do cliente e interagissem com o utilizador sem a necessidade

desse script passar pelo servidor. Isso significa que pode alterar facilmente o conteúdo do

documento exibido.

Page 34: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

14

O SQL (Structured Query Language) é uma linguagem de consulta a banco de dados criada na

década de 70 na IBM, com base em conceitos da Álgebra relacional. Foi desenvolvida para

padronização dos sistemas gerenciadores de banco de dados relacionais existentes. [6]

Alguns dos principais sistemas que utilizam SQL são: MySQL, Oracle, Firebird, Microsoft

Access, PostgreSQL (código aberto), entre outros.

O PHP (Hypertext Preprocessor) é 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. A sigla PHP vem do inglês Personal Home Page que traduzido para o

português significa página pessoal principal. [7]

3.2 Ferramentas utilizadas

No desenvolvimento deste trabalho foram utilizadas as seguintes ferramentas: Adobe

Photoshop CC 2017 e Microsoft Visual Studio Code.

O Photoshop, considerado como líder no mercado dos editores de imagem, é um editor

disponível para 2 dos sistemas operativos líderes no mercado (Microsoft Windows, Apple

MacOS), foi utilizado neste trabalho para a alteração do Layout, criação de banners, icons,

imagens e desenvolvimento do logotipo da loja.

O Visual Studio Code combina a simplicidade de um editor de código-fonte com ferramentas

de desenvolvimento poderosas, como a tecnologia IntelliSense e debugging. Em primeiro lugar,

é um editor que não atrapalha o utilizador, tendo uma interface simples e minimalista.[9]

Page 35: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

15

Capítulo 4

4 Descrição e ilustração da Plataforma

4.1 Estrutura

O OpenCart 1.x e 2.x usam o modelo de estrutura MVC (+ L), que significa:

Model (Modelo) – Arquivos com códigos php para execução de sql na base de dados do

OpenCart.

View (Visão) – Arquivos com a extensão tpl contendo códigos html (o layout em si).

Controller (Controlador) – Arquivos com códigos php organizados em classes e funções.

Language (Idioma) – Arquivos com variáveis php contendo a tradução para um determinado

idioma.

Os ficheiros da pagina produtos estão organizados dentro do modelo MVC da seguinte maneira:

§ No Fron-end da loja, eles são organizados dentro da pasta catalog, conforme o exemplo

abaixo:

M: catalog/model/catalog/product.php

V: catalog/view/theme/default/template/product/product.tpl

C: catalog/controller/product/product.php

L: catalog/language/pt-br/product/product.php

Page 36: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

16

§ No Back-End da loja, eles são organizados dentro da pasta admin, conforme o exemplo

abaixo:

M: admin/model/catalog/product.php

V: admin/view/template/catalog/product_form.tpl

C: admin/controller/catalog/product.php

L: admin/language/pt-br/catalog/product.php

O que se conclui é que, para cada página, sempre vai haver uma cadeia de arquivos dentro da

estrutura MVC+L, para que ela funcione corretamente. [10]

4.2 Funcionalidades

Algumas das funcionalidades nativas e recursos do OpenCart são:

Documentação livre.

Plataforma Open Source.

Registo ilimitado de produtos.

Registo ilimitado de marcas.

Registo ilimitado de departamentos.

Registo ilimitado de páginas de informações.

Suporte para várias moedas com conversão em tempo real.

Suporte para vários idiomas.

Suporte para utilização de vários temas (templates).

Suporte para extensões (plugins ou addons).

Instalador automático de extensões.

Sistema para modificações virtuais.

Page 37: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

17

Suporte para Google Merchant.

Suporte para Sitemap.

Suporte para uso de certificado de segurança (SSL).

Suporte para relacionamento entre produtos.

Suporte para avaliação/comentários de cliente nos produtos.

Suporte para promoção de produtos por período.

Suporte para desconto progressivo por quantidade de produto.

Suporte para venda de produtos por download.

Suporte para venda de acessórios opcionais por produto.

Suporte para atributos de produtos.

Suporte para opções de produtos.

Suporte para imagens adicionais do produto.

Suporte para vários tipos de impostos incluídos no produto.

Suporte para preços diferenciados por grupo de clientes.

Suporte para gerenciamento de várias lojas.

Suporte para modo de manutenção.

Suporte para url amigável.

Suporte para comprar como visitante.

Suporte para gestão de cache de informações da Base de dados.

Sistema de lista de desejos para clientes.

Sistema de busca por produtos na loja.

Sistema de comparação de produtos para clientes.

Sistema de comissão para afiliados da loja.

Sistema de venda de vale presentes e utilização do mesmo na loja.

Sistema de cupon de desconto ou portes grátis.

Sistema de envio de informativo (newsletter).

Page 38: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

18

Sistema de devolução de produtos.

Sistema de pontos onde os mesmos podem ser utilizados na troca de produtos.

Sistema de créditos (caso necessite devolver um valor ao cliente).

Sistema de histórico de pedidos com mudança de situação do pedido.

Sistema de permissões por grupo de utilizadores na administração da loja.

Sistema básico de SEO.

Impressão de faturas.

Venda direta pela administração da loja.

Vários relatórios de vendas, clientes, produtos, afiliados, etc.

Ferramenta de backup e restauração.

Ferramenta para gerenciamento de log de erros.

Redimensionamento automático das imagens (thumbnail).

E muito mais. [2]

4.3 Extensões

As extensões servem para modificar, expandir ou adaptar novos recursos no OpenCart.

O OpenCart vem com mais de 40 extensões nativas, elas são do tipo: modificação, estatística,

anti-spam, alimentador, antifraudes, módulo, pagamento, portes e temas.

Cada loja online tem suas peculiaridades ligadas ao seu ramo de atividade, as extensões

permitem que a loja online obtenha todos os recursos necessários para seu correto

funcionamento, o que permitirá atender as necessidades do lojista e dos clientes.

A criação de extensões não é de exclusividade da OpenCart Limited, qualquer um com

conhecimentos de PHP, CSS e jQuery, pode desenvolver extensões, podendo vender ou

distribuir gratuitamente.

Page 39: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

19

4.4 Requisitos técnicos para utilizar a plataforma

Preferencialmente o servidor local ou remoto deve ter os seguintes softwares instalados:

Webserver (Preferencialmente Apache ou funciona em Nginx).

PHP 5.4 (ou superior).

MySQL.

Curl (biblioteca PHP habilitada).

Mysqli (biblioteca PHP habilitada).

4.5 Design do Logotipo

Para o desenvolvimento do Logotipo da Marca (The Closet) foi utilizada a ferramenta mais

poderosa de edição de imagem, o Photoshop. Foi utilizado o tipo de letra Caviar Dreams, e uma

imagem de um cabide. Ficando um logotipo simples minimalista, mas ao mesmo tempo capta

a atenção do cliente.

Figura - 6 Design do logotipo - Photoshop

Page 40: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

20

4.6 Ilustração da Plataforma Front-end

4.6.1 Pagina inicial

A Home Page após alteração do footer e do header, slide e criação de novos módulos na área

central, com promoções, destaques e informações ficou assim:

Figura - 7 Home page dividida em 2 partes

Page 41: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

21

4.6.2 Pagina Produtos

Esta pagina mostra todos os produtos que satisfazem a consulta SQL sobre as categorias, assim

como a imagem associada a essa categoria

Figura - 8 pagina produtos

Page 42: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

22

4.6.3 Pagina contatos

Esta pagina mostra os contactos e maradas definidas na administração, foi também

personalizado um acesso ao mapa Google com a geo localização da loja, neste caso a ESTIG.

Está implementado também um formulário onde o utilizador pode deixar uma mensagem que

será enviada para o email definido.

Figura - 9 pagina contatos

Page 43: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

23

4.6.4 Footer

O footer foi codificado para mostrar as paginas mais relevantes para o utilizador, foi

implementada a opção de subescrever a newsletter foi também colocado um ícone para quase

todas as redes sociais.

Figura - 10 Footer

4.6.5 Mapa do site

Figura - 11 sitemap

Page 44: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

24

4.7 Ilustração da Plataforma Back-end

O lado de administração da loja da OpenCart é onde se pode modificar recursos, fazer upload

de imagens, adicionar produtos, acompanhar os clientes, gerir pagamentos e muito mais. A

personalização no administrador afeta a maneira como o cliente irá interagir com uma loja:

modificando a aparência, a estrutura e o conteúdo do front-end da loja.

Vamos explorar algumas destas funcionalidades.

Na pagina inicial temos a Dashboard, onde podemos ver todo o tipo de informação necessária

para a gestão de encomendas assim como para efeitos de marketing.

Figura - 12 Dashboard da pagina de administração

Page 45: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

25

4.7.1 Gestão de Produtos

Os produtos são o pão e a manteiga de todas as lojas de comercio online ou seja, o mais

importante das mesmas.

Antes de adicionar produtos, deve se garantir que todas as informações necessárias sobre o

produto que se está a adicionar à loja já estejam preenchidas. Quanto mais informações forem

fornecidas à plataforma sobre um produto específico, mais informado o cliente vai estar sobre

o produto que estiver a comprar.

Figura - 13 Gestão de produtos

Page 46: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

26

4.7.2 Gestão de Categorias

As categorias iniciais são mostradas no menu superior da página inicial e no lado esquerdo das

páginas do produto. Este recurso de navegação é usado para orientar os clientes para produtos

similares dentro da mesma categoria. Ao expor os clientes a diferentes produtos dentro de uma

categoria, o cliente pode comparar as semelhanças e diferenças entre os produtos para fazer a

compra mais acertada. Deve se estabelecer essas categorias antes de adicionar produtos, para

não existir o problema de adicionar o nome da categoria aos produtos mais tarde sem ela existir.

Figura - 14 categorias

Page 47: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

27

4.7.3 Opções

A seção Opções, no Catálogo, permite personalizar os detalhes que o cliente vê ao verificar um

produto. Na página do produto, a seção "Opções disponíveis" é exibida debaixo do preço. A

opção para esse produto deve ser selecionada antes que o cliente possa adicionar o produto ao

carrinho de compras. Nesta pagina foram criadas opções de tamanho numérico para sapatos e

outros artigos, e também uma opção de tamanho alfanumérico (S-M-L-XL).

A imagem abaixo mostra as opções criadas neste projeto, sendo possível a sua

alteração/eliminação e criar novas opções para atender as necessidades dos produtos expostos.

Figura - 15 Opções

Page 48: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

28

4.7.4 Informações

“Sobre nós”, “informações de entrega”, “política de privacidade” e “termos e condições” são

as paginas que vem criadas por defeito, porque são as páginas de informações mais importantes

usadas nas lojas online. Recomenda-se a sua utilização.

Caso se pretenda adicionar mais paginas a plataforma, nesta secção é possível faze-lo.

Figura - 16 Informação

Page 49: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

29

4.7.5 Gestão de Extensões

As extensões são programas complementares que oferecem funcionalidades extras para a

plataforma.

Dentro das extensões existem os módulos que são caixas de informações na plataforma que

ajudam o cliente a fazer a compra. Estes não fornecem funcionalidades extras para a plataforma,

mas destinam-se a exibir informação.

Como mostra na imagem essas extensões ou módulos podem ser métodos de pagamentos, como

por exemplo paypal, amazon, Authorize.NET entre outros, que podem ser facilmente integrados

na plataforma de maneira a oferecer um vasto leque de opções ao cliente.

Nesta plataforma, foi implementada como ferramenta de pagamento paypal (sem funcionar

devido a não ter conta associada) e transferência bancaria.

Figura - 17 Extensões

Page 50: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

30

4.7.6 Gestão de Layouts

Nesta secção é possível alterar o aspeto da pagina mediante as opções oferecidas por defeito.

Nesta plataforma foi adicionado um tema personalizado de maneira a ficar mais apelativo para

o utilizador.

Nesta pagina é possível mudar os apeto da home page assim como a pagina das categorias,

produtos entre outras.

Figura - 18 Layouts

Page 51: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

31

4.7.7 Gestão de vendas

Quando um cliente passa pelo checkout, as informações do seu pedido são automaticamente

transferidas para a seção Pedidos para possam ser acompanho na área de administração. Na

administração, pode se visualizar todos as encomendas na plataforma, adicionar manualmente

encomendas ou editar os detalhes das encomendas existentes.

É possível traçar perfis de compras, devoluções e gerir vales de oferta.

Figura - 19 Vendas

Page 52: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

32

4.7.8 Gestão de clientes

Os administradores devem saber quem são seus clientes e como gerir essa informação.

Existem três seções usadas para gerir informações do cliente: clientes, grupos de clientes e lista

negra de IP.

Quando um cliente cria uma conta, a plataforma armazenará suas informações automaticamente

nesta secção. Uma lista completa de clientes será exibida nesta página, juntamente com as

seguintes informações:

§ nome do cliente

§ E-mail: guarda o endereço de e-mail para confirmação de e-mails, notificações,

newsletters, etc.

§ Grupo de clientes: um grupo designado de clientes utilizado para aplicar descontos

especiais e enviar e-mails de grupo.

§ Status: nega ou aprova o login da conta do cliente.

§ Aprovação: aprova a conta do cliente após a sua criação.

§ IP: um endereço que revela a localização do cliente.

§ Data adicionada: a data em que a conta do cliente foi criada.

Figura - 20 Clientes

Page 53: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

33

4.7.9 Marketing

O sistema de email permite enviar e-mails para grupos de clientes específicos. Pode se usar este

recurso para enviar newsletters, informações sobre promoções ou para comunicar qualquer tipo

de informação da loja para os grupos de clientes pretendidos. Os grupos de clientes são

especialmente úteis para enviar emails a grupos específicos de pessoas em vez de todos os

clientes armazenados na plataforma.

Figura - 21 Marketing

Page 54: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

34

4.7.10 Definições

Nesta secção é possível alterar varias informações acerca da plataforma, como contactos,

horários, localizações, configurar emails, configurar servidor, definir meta tags, entre outras.

É também possível criar vários utilizadores com privilégios diferentes.

Figura - 22 Sistema

Page 55: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

35

4.7.11 Gestão de Relatórios

Os relatórios são muito importantes para a analise do mercado no qual esta loja se encontra, é

importante perceber quais as necessidades dos clientes de maneira a satisfazer essas mesmas.

Nesta secção é possível geral relatórios complexos de vendas, taxas, envio e devoluções.

Figura - 23 Relatórios

Page 56: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

36

Page 57: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

37

Capítulo 5

5 Conclusões

5.1 Conclusão

As equações e expressões deverão ser centradas no texto e identificadas por números

consecutivos.

O OpenCart é uma alternativa muito interessante em relação aos concorrentes que foram

mencionados acima neste relatório.

É uma plataforma muito eficiente para iniciantes e programadores intermediários / donos de

lojas. Funciona sem problemas com quase qualquer tipo de produtos. Requer menos recursos

de servidor comparado por exemplo com o PrestaShop e o Magento.

Acredito que a escolha acertada para este projecto tenha sido esta plataforma, pois tem um vario

leque de programadores, e muitas extensões gratuitas caso se pretenda colocar a plataforma

online e ativa.

Com um design minimalista e apelativo mais um sistema de administração poderoso e bem

configurado The Closet está pronto para ser inserido no negocio de venda online.

Page 58: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

38

5.2 Contributo pessoal

A nível pessoal, este trabalho possibilitou uma aprendizagem de novos conteúdos que serão

uteis para o meu futuro profissional, principalmente numa era onde o comercio online cresce

de ano para ano, e grande parte dessas lojas baseiam-se neste tipo de plataformas (CMS).

Este trabalho demostrou que através de soluções open source é possível contruir plataformas

com enorme potencial.

Com a elaboração deste projeto adquiri novos conhecimentos na área de comercio online e na

implementação de plataformas CMS, uma área que se encontra num aumento significativo. O

conhecimento adquirido neste projeto será bastante útil para o meu progresso profissional.

Conclui-se então que a elaboração deste projeto foi estimulante e produtiva.

Page 59: Rafael César Sousa Brites – a28335projinf.estig.ipb.pt/~a28335/Relatorio/Closet_Report.pdf · It is a complete platform with front-end and back-end offering a lot of tools for

39

Referências bibliográficas

[1] Most Popular eCommerce Platforms, Disponível online em https://www.synotive.com/blog/10-most-popular-ecommerce-platforms-to-build-your-online-store Consultado em Junho 2017.

[2] O que é o openCart, Disponível online em https://www.opencartbrasil.com.br/o-que-e-opencart Consultado em Junho 2017.

[3] Comercio online em Portugal ultrapassa este ano os €4 Biliões Disponível online em http://www.hipersuper.pt/2016/12/21/comercio-online-em-portugal-ultrapassa-este-ano-os-e4bilioes-pesando-5-no-total-do-retalho/ Consultado em Agosto 2017.

[4] What is E-Commerce, Disponível online em http://www.businessnewsdaily.com/4872-what-is-e-commerce.html Consultado em Agosto 2017.

[5] What is Ecommerce, Disponível online em http://www.networksolutions.com/education/what-is-ecommerce/ Consultado em Agosto 2017.

[6] SQL, Disponível online em https://pt.wikipedia.org/wiki/SQL Consultado em Agosto 2017.

[7] PHP, Disponível online em https://pt.wikipedia.org/wiki/PHP Consultado em Agosto 2017.

[8] HTML, Disponível online em https://pt.wikipedia.org/wiki/HTML Consultado em Agosto 2017.

[9] Why VSCode, Disponível online em https://code.visualstudio.com/docs/editor/whyvscode Consultado em Agosto 2017.

[10] OpenCart Documentation, Disponível online em http://docs.opencart.com Consultado em Agosto 2017.