Embed Size (px)
Citation preview
UNIVERSIDADE SÃO FRANCISCO
Curso de Engenharia de Computação
FABÍOLA CALIXTO MATSUMOTO
DESENVOLVIMENTO DE APLICAÇÃO DE COMÉRCIO
ELETRÔNICO SEGMENTADO VOLTADO PARA COMPRA
COLETIVA
Itatiba 2011
FABÍOLA CALIXTO MATSUMOTO - RA 002200601359
DESENVOLVIMENTO DE APLICAÇÃO DE COMÉRCIO
ELETRÔNICO SEGMENTADO VOLTADO PARA COMPRA
COLETIVA
Monografia apresentada ao Curso de Engenharia de Computação, da Universidade São Francisco, como requisito parcial para obtenção do título de Bacharel em Engenharia de Computação.
Orientador: Prof. Marcelo Augusto
Gonçalves Bardi.
Itatiba 2011
AGRADECIMENTOS
Em primeiro lugar agradeço a Deus, por permitir e me tornar capaz de tantas coisas
em minha vida. Por me amparar nos momentos de fraquezas. Por fechar janelas e abrir
milhares de portas no caminho que eu escolhi percorrer. A minha família principalmente ao
meu esposo e minha filha que mesmo sentindo minha ausência souberam compreender e
me motivar durante toda a graduação.
E de modo especial me refiro ao professor Marcelo Augusto Gonçalves Bardi pela
sua tão importante orientação, dedicação e disposição constante em todos os momentos da
realização deste trabalho, proporcionando-me grande estímulo e motivação para realização
do mesmo.
RESUMO
O comércio eletrônico, também conhecido por e-commerce ou loja virtual, contribui
para o desenvolvimento, distribuição, produção e vendas pela internet, tornando as
transações mais rápidas e econômicas. Os sites de compras coletivas, apresentam ofertas
de anunciantes com grandes descontos, possibilitando alcançar consumidores que não
seriam atingidos em condições normais, trazendo o cliente para conhecer o seu produto em
promoção e, eventualmente adquirir outros produtos. Dessa forma, o objetivo deste trabalho
é projetar e desenvolver um sistema segmentado de compra coletiva que tem como
diferencial focar uma base de usuários com ofertas específicas aos seus interesses,
discutindo os fundamentos da prática e as metodologias de desenvolvimento inerentes a
essa classe de aplicação Web. O sistema é desenvolvido em Magento que é uma
plataforma completa de comércio eletrônico em código aberto que tem como base o
framework Zend, o que lhe permite a separação em MVC. Adicionalmente, a linguagem
base da plataforma é PHP, banco de dados MySQL além de outras tecnologias, como XML
e AJAX. Neste projeto são abordadas as diversas etapas para a criação, formas de
divulgação e administração de um site de compras coletivas. No qual se obteve uma
solução customizada funcional.
Palavras-chave: E-commerce .tecnologias livres .compra coletiva. magento.
ABSTRACT
Electronic commerce, also known as e-commerce or online store, contributes to the development, distribution, production and sales over the Internet, making transactions faster and more economical. The group sales sites, offers advertisers have deeply discounted, allowing to reach consumers who would not be achieved under normal conditions, bringing the customer to know your product promotion, and possibly acquire other products. Thus, the objective of this work is to design and develop a segmented system of group sale which is a differential focus on user base with offers specific to your interests, discussing the basics of the practice and development methodologies inherent to this class of Web application . the system is developed in Magento which is a complete e-commerce platform in open source is based on the Zend framework, which allows the separation of MVC. Additionally, the language of the platform is based on PHP, MySQL database and other technologies such as XML and AJAX. This project addresses the various stages for the creation, dissemination and forms of administration of a group sale site. In which he obtained a customized solution functional.
Keywords: E-commerce. free technologies. collective purchasing. magento.
SUMÁRIO
1. INTRODUÇÃO ................................................................................................................... 12
2. DESENVOLVIMENTO ........................................................................................................ 13
2.1 Fundamentação teorica .................................................................................................... 13
2.1.1 Histórico da Web ............................................................................................................ 13
2.1.2 Comércio eletrônico ....................................................................................................... 15
2.1.3 Comércio eletrônico voltado para compras coletiva ....................................................... 19
2.1.3.2 O ciclo da compra coletiva ......................................................................................... 21
2.1.3.3 Sites de compra coletiva segmentado ........................................................................ 24
2.1.3.4 Tipos de sistemas de compra coletiva ........................................................................ 25
2.1.4 Frameworks Web .......................................................................................................... 26
2.1.4.1 Zend Framework .......................................................................................................... 27
2.1.4.2 Plataforma osCommerce ............................................................................................. 27
2.1.4.3 Plataforma Magento ................................................................................................... 28
2.1.5 Padrões de Projeto ....................................................................................................... 29
2.1.5.1 Arquitetura MVC ........................................................................................................ 30
2.1.6 Linguagem de programação e ferramentas ................................................................... 31
2.1.6.1 PHP ........................................................................................................................... 31
2.1.6.2 JAVASCRIPT ............................................................................................................. 32
2.1.6.3 AJAX .......................................................................................................................... 33
2.1.6.4 XML ........................................................................................................................... 33
2.1.6.5 Banco de dados ......................................................................................................... 34
2.1.7 Software código aberto ................................................................................................. 35
2.2 MÉTODOLOGIA DE DESENVOLVIMENTO .................................................................... 36
2.2.1 Ferramentas utilizadas ................................................................................................... 36
2.2.2 Diagramas de caso de uso ............................................................................................. 37
2.2.3 Protótipos do site ............................................................................................................ 38
2.2.4 Instalação e configuração do Magento ............................................................................ 39
2.2.5 Interface do Magento ...................................................................................................... 43
2.2.6 Estrutura de arquivos do Magento .................................................................................. 48
2.2.7 Site de compras coletivas customizações ....................................................................... 48
2.2.7.1 Cadastro de cidades para ofertas ................................................................................ 48
2.2.7.2 Criação de categorias e subcategorias ........................................................................ 50
2.2.7.3 Inserindo ofertas para o site ......................................................................................... 55
2.2.7.4 Visualizando promoção na página principal ................................................................. 55
2.2.7.5 Calculando tempo restante da oferta ........................................................................... 56
2.2.7.6 Exibir preço normal e desconto da oferta ..................................................................... 58
2.2.7.7 Exibir quantidade de ofertas vendidas ......................................................................... 59
2.2.7.8 Conexão com redes sociais e microblogs .................................................................... 63
2.2.7.9 Configurações para realização de uma venda ............................................................. 66
2.2.7.10 Configurações de pagamento (PagSeguro) ............................................................... 70
2.2.7.11 Configurações do E-mail marketing ........................................................................... .73
2.2.7.12 Configurações gerais pós venda... ............................................................................. .74
2.2.7.13 Backup do banco de dados ........................................................................................ 78
2.3 RESULTADOS E DISCUSSÕES ....................................................................................... 80
2.4 CONCLUSÃO .................................................................................................................... 82
REFERÊNCIAS BIBLIOGRÁFICAS ........................................................................................ 83
LISTA DE ABREVIATURAS E SIGLAS
AJAX – Asynchoronous JavaScript and XML
ASP – Active Server Pages
ARPANET – Advanced Research and Projects Agency
CERN – Organização Européia de Pesquisa Nuclear
CSAIL – Laboratório da Ciência da Computação e Inteligência Artificial
CMS – Content management system
CSS– Cascading Style Sheets
CPF – Cadastro de Pessoas Físicas
CPU – Central processing unit
FTP – File Transfer Protocol
GNU – General Public Licence
HTML– HyperText Markup Language
MIT – Instituto de Tecnologia de Massachusetts
MVC – Model, View, Controler
MySQL– Structured Query Language
NCP – Network Control Protocol
OSI – Open Source Initiative
OSL – Open Source Lab
PDF – Portable Document Format
POO – Programação Orientada a Objetos
PHP– Hypertext Preprocessor
PHTML – Hypertext Preprocessor Markup Language
RAM – Random Access Memory
RSS – Really Simple Syndication
SEO – Search Engine Optimization
SGDB – Sistema de gerenciamento de banco de dados
SGML – Standard Generalized Markup Language
SQL – Structured Query Language
SSL – Secure Sockets Layer
WAIS – Wide Area Information Service
W3C – Word Wid Web Consortium
XML – Extensible Markup Language
URL – Uniform resource locator
LISTA DE FIGURAS
FIGURA 1: Tim Berners Lee, o inventor da Web ........................................................... 13
FIGURA 2: Computador NeXT ....................................................................................... 14
FIGURA 3: Parte da interface do primeiro navegador criado por Tim Berners Lee ........ 14
FIGURA 4: Etapas do ciclo de compra coletiva ............................................................. 21
FIGURA 5: Modelo de um site de compra coletiva segmentada 1 ................................. 24
FIGURA 6: Modelo de um site de compra coletiva segmentada 2 .................................. 25
FIGURA 7: osCommerce Online demonstração ............................................................. 27
FIGURA 8: Magento Online demonstração ..................................................................... 28
FIGURA 9: Arquitetura MVC em aplicações Web ........................................................... 31
FIGURA 10: Diagrama de caso de uso do ator cliente .................................................... 36
FIGURA 11: Diagrama de caso de uso do ator administrador......................................... 37
FIGURA 12: Diagrama de caso de uso do ator sistema .................................................. 37
FIGURA 13: Protótipo da oferta do dia (página principal) ............................................... 38
FIGURA 14: Protótipo das ofertas anteriores .................................................................. 39
FIGURA 15: Criando subdomínio: http://www.loja.fcmdesign.com.br .............................. 40
FIGURA 16: Criando banco de dados através do cPanel ............................................... 40
FIGURA 17: Criando usuário fabiola ao banco de dados ................................................ 41
FIGURA 18: Todas as permissões foram dadas á usuária fabiola .................................. 41
FIGURA 19: Instalação do Magento ............................................................................... 42
FIGURA 20: Conexão com o banco de dados ................................................................ 44
FIGURA 21: Frontend default do site .............................................................................. 43
FIGURA 22: Painel de login ( interface de administração) .............................................. 44
FIGURA 23: Backend do site (área administrativa) ......................................................... 44
FIGURA 24: Destacando os diretórios app e skin, que abrigam todos os principais ....... 45
FIGURA 25: dentro do diretório app................................................................................ 46
FIGURA 26: dentro do diretório dos layouts contidos na pasta app ................................ 46
FIGURA 27: dentro do diretório dos templates em PHTML, contido na pasta app .......... 47
FIGURA 28: dentro do diretório skin. Esta pasta contém os arquivos CSS, imagens e
arquivos JavaScript ........................................................................................................ 47
FIGURA 29: Projeto website compra coletiva ................................................................. 48
FIGURA 30: Cadastrando a loja da cidade de Itatiba ...................................................... 49
FIGURA 31: Lojas de Itatiba e Morungaba mostrada no backend .................................. 49
FIGURA 32: Visão das cidades de Itatiba e Morungaba ................................................. 49
FIGURA 33: Cadastrando categoria para a loja de Itatiba .............................................. 50
FIGURA 34: Categorias e subcategorias criadas ............................................................ 51
FIGURA 35: Categorias e subcategorias criadas ............................................................ 51
FIGURA 36: Criando atributo quantidade mínima para ativar a oferta ............................ 53
FIGURA 37: Criando Cupom .......................................................................................... 54
FIGURA 38: Criando produto .......................................................................................... 54
FIGURA 39: Informações de produtos ............................................................................ 54
FIGURA 40: Inserindo preço no produto ......................................................................... 55
FIGURA 41: Configurando novos produtos para pagina principal ................................... 55
FIGURA 42: Relógio Regressivo .................................................................................... 58
FIGURA 43: Exibindo Desconto ...................................................................................... 59
FIGURA 44: 10.000 Cupons ........................................................................................... 61
FIGURA 45: Quantidade de ofertas vendidas ................................................................. 62
FIGURA 46: Avisar um Amigo ........................................................................................ 65
FIGURA 47: Após clicar em “Compartilhe no Facebook”. ............................................... 65
FIGURA 48: Configuração para desativar pedido de visitante e exibir termos e
condições ....................................................................................................................... 67
FIGURA 49: Campos adicionais para clientes ................................................................ 68
FIGURA 50: Criando conta vendedor ............................................................................. 70
FIGURA 51: Modelo de uma conta vendedor ................................................................. 71
FIGURA 52: Ativando URL de retorno ............................................................................ 71
FIGURA 53: Token de segurança gerado ....................................................................... 72
FIGURA 54: Configurando PagSeguro no Magento ........................................................ 72
FIGURA 55: Criando Termo de Condição ....................................................................... 73
FIGURA 56: 56 – Fila de envio de E-mail marketing ...................................................... 74
FIGURA 56: 56 – E-mail de transação personalizado .................................................... 74
FIGURA 58: Links no rodapé do site............................................................................... 75
FIGURA 59: Alterando URL Padrão................................................................................ 75
FIGURA 60: Alterando Grupo de Clientes ...................................................................... 76
FIGURA 61: Alterando Layout de Categorias ................................................................. 77
FIGURA 62: Desligando Módulos do Sistema ................................................................ 77
FIGURA 63: Relatório de Vendas no Período ................................................................. 78
FIGURA 64: Backup pode ser salvo em lugar seguro ..................................................... 79
LISTA DE QUADROS
QUADRO 1: Dados Globais da empresa GrounpOn ....................................................... 20
QUADRO 2: Dados da empresa GroupOn no Brasil ....................................................... 20
QUADRO 3: Dados da empresa Peixe Urbano ............................................................... 21
QUADRO 4: Código Relógio Regressivo em JavaScript ................................................. 56
QUADRO 5: Código desconto ........................................................................................ 58
QUADRO 6: Código quantidade de ofertas vendidas ..................................................... 59
QUADRO 7: Código exibe mapa de localização da empresa ......................................... 60
QUADRO 8: Código exibe mínimo para ativar oferta ...................................................... 61
QUADRO 9: Código exibe número de ofertas mínima para ativar ofertas. ...................... 62
QUADRO 10: Código para envio de oferta destaque por twitter. .................................... 63
QUADRO 11: Código para compartilhar oferta pelo facebook. ....................................... 64
QUADRO 12: Código para enviar E-mails aos amigos do produto destaque. ................. 64
QUADRO 13: Código exibe mensagem “Siga-nos no Twitter”. ....................................... 66
QUADRO 14: Código em AJAX chama URL checkout para agilizar o processo ao
clicar em comprar. .......................................................................................................... 66
QUADRO 15: Código alterado de 2 colunas para 1 coluna lateral.. ............................... 67
QUADRO 16: Campo sobrenome pode ser apagado ou comentado. ............................. 69
QUADRO 17: Validação dos campos de endereço. ........................................................ 69
12
1 INTRODUÇÃO
Numa sociedade cada vez mais apta à adoção de novas tecnologias, a internet
passou a ser uma ferramenta indispensável na vida das pessoas procurando aumentar a
qualidade de vida e o bem-estar da sociedade. Do ponto de vista econômico, pode ser
utilizada para o comércio eletrônico sendo um diferencial estratégico para os
empreendedores e consumidores, pois é uma oportunidade de atuar em ambiente comercial
global (LASTRES, 1999). O comércio eletrônico, também conhecido por e-commerce ou loja
virtual, contribui para o desenvolvimento, distribuição, produção e vendas pela internet,
tornando as transações mais rápidas e econômicas. Por exemplo, nos Estados Unidos, o
volume de vendas on-line começou a crescer a partir de 1995, com o surgimento da
empresa Amazon, e diversas outras empresas.
Já no Brasil este processo começou cerca de cinco anos depois, com diversas lojas
iniciando suas atividades on-line (FELIPINI, 2011). Desde então, as vendas de e-commerce
não param de crescer no Brasil e no mundo, ainda mais após o surgimento de lojas de
compra coletiva.
Os sites de compras coletivas são uma nova categoria de e-commerce com algumas
particularidades tais como: apresentar ofertas de anunciantes com grandes descontos,
possibilitando alcançar consumidores que não seriam atingidos em condições normais,
trazendo o cliente para conhecer o seu produto em promoção e, eventualmente adquirir
outros produtos.
Visando explorar essa nova modalidade de negócio o objetivo deste trabalho é
desenvolver um sistema segmentado de compra coletiva que tem como diferencial o uso de
ferramentas open souce além de focar uma base de usuários com ofertas específicas aos
seus interesses, discutindo os fundamentos da prática e as metodologias de
desenvolvimento inerentes a essa classe de aplicação web.
13
2 DESENVOLVIMENTO
2.1 FUNDAMENTAÇÃO TEÓRICA
2.1.1 Histórico da Web
De acordo com SILVA (2008), a Web, palavra de origem inglesa que significa teia, é
usada para marcar a rede mundial de computadores, no qual o seu funcionamento é
parecido com uma gigantesca teia de aranha, conectando computadores de todo o mundo.
A história da Web se confunde com a de seu idealizador e desenvolvedor, o físico
britânico Tim Berners-Lee (FIGURA 1). O físico Tim iniciou suas pesquisas durante os anos
1980 quando trabalhava no CERN, com sede em Genebra, visando descobrir uma maneira
que permitisse cientistas de todo o mundo compartilhar seus textos e pesquisas de forma
eletrônica. Assim, como primeira contribuição, define o conceito de hyperlinks (SILVA,
2008).
Fonte: (SILVA, 2008)
FIGURA 1 – Tim Berners Lee, o inventor da Web.
Já em 1990, Tim criou o protótipo do primeiro navegador para rodar em
computadores da NeXT, uma empresa fundada por Steve Jobs em 1985. A FIGURA 2
14
mostra o computador usado por Tim na época, enquanto que a FIGURA 3 mostra partes da
interface do navegador de Tim.
Fonte: SILVA (2008)
FIGURA 2 – Computador NeXT.
Fonte: SILVA (2008)
FIGURA 3 – Parte da interface do primeiro navegador criado por Tim Berners Lee.
15
2.1.2 Comércio eletrônico
E-commerce, comércio eletrônico, comércio virtual ou loja virtual é a forma de
compra e venda por meio da Web. Deste modo, podem-se comprar os mais variados
produtos e serviços através das lojas virtuais, escolher, pesquisar colocar todas as
descrições como modelo, cor, tamanho, formas de pagamento. Ao final do processo, o
cliente recebe, dentro de um prazo determinado, o produto ou serviço em casa (LUPI, 2010).
As lojas virtuais surgiram conforme a Web foi evoluindo, se difundindo e se
popularizando, o que é possível observar na GRAFICO 1 que mostra uma evolução no
aumento em bilhões de compras feitas via Web entre o ano de 2006 a 2010, devido as
tantas facilidades e variedades (ARAYA, 2008).
Fonte: ARAYA (2008)
GRAFICO 1 – Volume de negócios na Web.
Num primeiro momento, o objetivo maior era diminuir o número de pessoas
envolvidas em uma venda, além de auxiliar na globalização da economia através da
diminuição de limites geográficos, parcerias e negócios. Entretanto, logo o modelo de
atendimento ao cliente também foi evoluindo, pois a internet esta o tempo todo disponível
para a troca de informações, por um valor baixo.
No início, algumas empresas implementaram os chamados call-centers, que nada
mais é do que uma infra-estrutura de um centro de atendimento ao cliente. Logo surgiram os
sistemas de informação, os bancos de dados, profissionais de atendimento telefônico e a
interação entre voz e dados, que representa o topo de evolução do atendimento virtual.
Assim, os recursos de telefonia juntamente com sistemas de banco de dados mais uma
16
filosofia de televendas contribuíram para o início do comércio eletrônico que se juntou com
os recursos da internet, browsers, servidores Web e provedores de acesso.
Em virtude disto os clientes podem fazer suas compras a qualquer hora, sem
precisar enfrentar problemas de ordem alheia à sua vontade, como mau-atendimento,
trânsito, entre outros (LUPI, 2010).
Para PEIXOTO (2001), comércio eletrônico tem conceitos diversos formulados sob
diferentes prismas. Segundo o autor:
• Conceito técnico – comércio eletrônico é uma combinação de
tecnologias, aplicações e procedimentos negociais que permitem a compra e
venda on-line de bens e serviços entre governos, sociedades, corporações
privadas e o público. Antes dos fenômenos da internet;
• Conceito econômico – comércio eletrônico é a realização de
toda a cadeia de valor dos processos de negócios, realização esta efetuada
no ambiente digital;
• Conceito administrativo (privado) – comércio eletrônico é um
termo genérico que descreve toda e qualquer transação comercial que se
utiliza de um meio eletrônico para ser realizada. Com o uso de tecnologia se
obtém a otimização do relacionamento da cadeia de suprimentos até o ponto
de venda, bem como a melhora da comunicação entre a empresa e o cliente
final;
• Conceito jurídico – comércio eletrônico é a atividade
comercial explorada através de contrato de compra
e venda com a particularidade de ser este contrato celebrado em ambiente
virtual, tendo por objeto a transmissão de bens físicos ou virtuais e também
serviços de qualquer natureza.
De acordo com BOGO (2000), para entender melhor o funcionamento do comércio
eletrônico torna-se necessário entender um pouco sobre o funcionamento do mecanismo de
atendimento e vendas por telefone, que foi a primeira tentativa de venda virtual que surgiu
no inicio da década de 1980. Segundo o mesmo autor, os seguintes conceitos são inerentes
ao comércio eletrônico:
• Desmaterialização – Trata-se da substituição do contato físico
e do movimento por informações através do telefone, catálogos ou até
mesmo um contato virtual;
• Desintermediação – Exclusão de intermediários na cadeia de
venda do produto;
• Grupo de afinidades – São serviços e produtos que possuem
alguma semelhança quando se trata de consumo e divulgação e que
17
oferecem ao consumidor serviços apenas visuais, no qual as características
são inquestionáveis em termos de garantias, qualidade e preços.
Ainda conforme (BOGO, 2000) o mundo virtual, com filosofias de consumo próprias
ainda não claramente estabelecidas e compreendidas, envolve basicamente a facilidade de
manipulação de um browser juntamente com ás necessidades do cliente e a oferta de
produtos e serviços e serviços até a efetivação da compra, segundo os seguintes critérios:
• Buy – Trata-se da facilidade do consumidor de preencher um
pedido de compra onde não existe a necessidade de um contato pessoal.
Essas informações são suportadas por múltiplas formas de pagamento e
deve ser livre de erros e ágil no processamento do pedido de compras;
• Learn – São informações focadas e direcionadas nas
necessidades dos usuários do browser;
• Shop – São informações que se baseiam nas preferências do
consumidor e na sequência de ações no browser, que auxiliam o consumidor
a tomar decisões;
• Support – Trata-se de um atendimento 24 horas por 7 dias
além de toda comunicação referente a pergunta/resposta escrita, além de
contar com uma organização de processos e profissionais que identificam um
problema e encaminham a solução com rapidez.
Além das características próprias de sistemas e-commerce, existem alguns critérios
que são comuns com os sistemas tradicionais de comércio segundo (BOGO,2000), que são:
• Atendimento ao Cliente – É necessário estabelecer um canal
de comunicação preciso, transparente e veloz, pois é muito importante essa
interação no processo de venda, seja virtual ou não, para que os
consumidores continuem sendo clientes;
• Estoque – A maneira de gerenciar deve ser similar a de um
estoque normal, com informações precisas de custo, giro e tempo de
reposição. É muito importante separar fisicamente o estoque dos produtos
vendidos pela Web para ganhar eficiência nas vendas;
• Logística – É importante estar preparado para entregar
produtos com rapidez e individualmente. Levando em consideração que os
custos de transporte não devem ser muito elevados;
• Merchandising – Todos os comerciantes sabem que um
produto bem apresentado sai mais rápido das prateleiras. Na Web isso quer
dizer preços claros, informações completas dos produtos expostos, imagens
18
de qualidade. Deve-se levar em consideração a localização dos produtos.
Enquanto os clientes entram nas lojas atraídas pelos produtos expostos na
vitrine. Na Web, esses produtos ficam na página inicial;
• Monitoramento – Manter sistemas de monitoramento
informatizados e precisos;
• Promoção – Anúncios em jornais, televisão ou revistas estão
sendo substituídos por banners animados, promoções hot sell (promoções
relâmpagos) ou E-mails;
• Pagamento – É necessário oferecer formas de pagamento
diferenciadas na Web, como: boleto, depósito, cheque entre outros;
• Pós-venda – O serviço pós-venda precisa ficar disponível para
os clientes na Web, incluindo normas para devolução de produtos, troca,
perguntas e respostas mais frequentes e informativos periódicos por E-mails
sobre lançamentos, novidades, etc.;
• Segurança – É muito importante que recursos de segurança
sejam utilizados, pois a segurança é um dos pontos mais importantes do
comércio eletrônico, o cliente ainda tem medo de comprar com cartão pela
internet. Portanto processos de encriptação de dados, adoção de SSL devem
ser adotados e comunicados com clareza para o consumidor;
• Vendas – Para obter êxito nas vendas, é muito importante uma
equipe de vendedores motivados e bem preparados. Na Web, isso pode ser
feito com muito mais firmeza e com um custo relativamente menor. Os
serviços e produtos oferecidos precisam apresentar informações detalhadas,
além de apresentar seus diferenciais em relação aos concorrentes, além de
análises de consumidores ou jornalistas referente a qualidade e outras
informações importantes que podem ajudar o cliente a decidir a compra com
mais rapidez.
19
2.1.3 Comércio eletrônico voltado para compra coletiva
De acordo com GAVIOLI (2011) a compra coletiva é uma categoria de loja virtual que
tem como principal objetivo vender produtos e serviços com grandes descontos para certa
quantidade de pessoas.
Segundo FELIPINI (2011) a verdadeira raiz da compra coletiva é chinesa, cuja
população, há muito tempo, tem como costume a associação com outros compradores para
que assim possam conseguir melhores negociações. A infra-estrutura da internet que foi
utilizada como meio para unir e chamar as pessoas para comprar produtos com maiores
descontos foi o grande diferencial do sistema de compra coletiva.
Ainda de acordo com FELIPINI (2011), a definição de compras coletivas pode
adquirir diferentes pontos de vista a partir do ângulo que desejarmos visualizar. Para o
usuário da Web, o sistema de compra coletiva é uma forma de comprar produtos ou
serviços com descontos generosos. Já para o comerciante, é visto como uma ferramenta de
marketing, uma forma eficaz de adquirir clientes em massa. Finalmente, para os
empreendedores, compra coletiva representa um novo seguimento negócio a ser explorado.
Assim, se bem aplicado representa uma excelente oportunidade de negócio para todos os
envolvidos.
Uma das primeiras empresas a aderir a compra coletiva foi o site chinês
TeamBuy.com.cn, que iniciou suas atividades em 2006, dois anos antes que a empresa
GroupOn nos Estados Unidos.
De fato, o modelo era bem simples mas já usava compradores na negociação e a
internet como intermédio ou seja o modelo de compra coletiva já estava presente no modelo
chinês. Mas foi nos Estados Unidos que o modelo de sites de compra coletiva se
desenvolveu e passou a ser utilizado em todo o mundo.
Nos Estados Unidos o primeiro site de compras coletivas foi o GroupOn, modelo
criado por Andrew Mason em novembro 2008. Alguns dados a respeito da empresa são
apresentados nas TABELAS 1 e 2.
20
QUADRO 1 – Dados Globais da empresa GrounpOn
Sede Chicago USA
Atuação Maiores cidades dos Estados Unidos e 29
países
Fundação Novembro 2008
Valor estimado 2011* US$ 5 a 7 bilhões
Capital fechado Fundos privados
Faturamento estimado 2010 US$ 2 bilhões
Lucro estimado 5 milhões
Clientes cadastrados 70 milhões de cadastrados no mundo
Transações realizadas Mais de 50 milhões de cupons vendidos em
todo o mundo.
Valor médio dos descontos 57%
Fonte: FELIPINI (2011);
*Valor estimado por analistas de mercado.
QUADRO 2 – Dados da empresa GroupOn no Brasil
Entrada no Brasil Junho de 2010
Sede São Paulo
Principal executivo Florian Otto _CEO
Cidades ativas 41
Quantidade de clientes cadastrados Quase 10 milhões
Fonte: Felipini (2011)
Já no mercado brasileiro, o sistema de compra coletiva Peixe Urbano foi pioneiro. O
criador foi o jornalista Júlio Vasconcelos e o desenvolvedor de software Alex Tabor, ambos
com experiência na área de internet e tecnologia da informação (FELIPINI, 2011). Alguns
dados a respeito da empresa são apresentados na TABELA 3.
21
QUADRO 3 – Dados da empresa Peixe Urbano
Sede Rio de Janeiro
Fundação Março 2010
Fundadores Julio Vasconcelos, Alex Tabor
Cidades ativas 56
Quantidade de clientes cadastrados Cerca de 10 milhões
Fonte: FELIPINI (2011)
2.1.3.1 O ciclo da compra coletiva
Para que o sistema funcione são necessários um comerciante, compradores
interessados no produto e um site de compra coletiva que vai fazer a intermediação entre
ambos. Segundo (FELIPINI, 2011) existe um ciclo na compra coletiva mostrado na (FIGURA
4) segue descrição:
Fonte: FELIPINI (2011)
FIGURA 4 – Etapas do ciclo de compra coletiva.
22
(I) Comerciante contrata site de compra coletiva: O processo geralmente se inicia com a
decisão do comerciante realizar uma promoção.
Para o fechamento do acordo entre o comerciante e o site, algumas variáveis
importantes devem ser discutidas como, por exemplo; o produto ofertado, o desconto
oferecido, o prazo de encerramento da oferta e a duração da oferta. O percentual da venda
repassado ao site de compra coletiva também depende do volume de venda dos cupons,
sendo parte totalmente interessada no sucesso dessas vendas e deverá utilizar sua
experiência na montagem de uma campanha de sucesso.
Nos dias atuais alguns setores de negócios como restaurantes, prestadoras de
serviços de beleza e estética, concentram a maior parte das ofertas, porém a tendência será
ampliar cada vez mais o seu alcance incluindo novos produtos.
(II) Site de compra coletiva divulga a oferta: O site de compras coletivas tem o papel de
intermediar entre o comerciante e o cliente. Ele é um tipo de corretor que recebe uma
comissão de até 50% do valor das vendas, deste modo seu interesse é que as vendas
sejam concretizadas e que o comprador fique satisfeito com o produto. Para isso serão
montadas páginas de divulgação no site, além de peças publicitárias para chamar a atenção
dos compradores na internet. A ferramenta mais importante utilizada neste tipo de negócio é
o E-mail marketing.
Os sites de compra coletiva possuem um imenso cadastro de clientes interessados e
diariamente é enviado pelo menos um E-mail com novas ofertas.
Além de E-mail marketing, campanhas são realizadas na internet em inúmeros
portais com o objetivo de atrair novos clientes. O número de usuários cadastrados por
alguns dos maiores sites do Brasil já atingiu um volume relativamente grande, como, por
exemplo; Groupon: 10 milhões; Peixe urbano: 8 milhões; ClickOn: 6 milhões; Oferta única: 2
milhões. Porém é desconhecida a quantidade exata de usuários, até mesmo porque grande
parte das pessoas se cadastra em mais de um site.
(III) Comprador adquire a oferta: É nesta etapa que o comprador aparece. O comprador
pode ter recebido o E-mail do site de compra coletiva, se o mesmo já tiver se cadastrado ou
pode ter se interessado por algum anúncio de oferta. De qualquer maneira o comprador
deverá estar cadastrado no site para que possa efetuar uma compra. O cadastro é muito
simples de ser feito, após o cadastro e a confirmação do cadastro através da resposta a um
E-mail, o usuário passa a receber ofertas enviadas por E-mail diariamente. O processo de
compra também é bem simples. Após a leitura das condições da oferta, basta clicar no
botão comprar e pagar o cupom com cartão de crédito ou transferência bancária. Essa
23
operação é realizada em um ambiente seguro das operadoras de cartão ou bancos. É
necessária uma quantidade mínima de compradores para que a oferta seja validada.
(IV) Site gerencia pagamentos e entrega de cupons: O pagamento é feito no próprio site,
a liberação do cupom, fica disponível para o usuário na página de gerenciamento. Logo
após o período de oferta, o site de compra coletiva repassa as informações ao comerciante,
já descontando o valor da comissão.
Uma questão que gera algumas dúvidas é referente aos tributos sobre as transações
ocorridas. Há duas transações no sistema de compra coletiva no qual a primeira é uma
prestação de serviço do site de compra coletiva para o comerciante. Então, deve ser emitida
uma nota fiscal de serviço pelo site de compra coletiva no valor acordado. A segunda
transação ocorre entre o comprador e o comerciante no momento de adquirir o produto ou
utilizar o serviço. Assim o comerciante deve emitir a nota fiscal constatando o valor do
produto e o valor final com o desconto.
A nota fiscal pode ser de venda ao comprador, no caso de um restaurante, por
exemplo, ou de prestação de serviços. Conseqüentemente o comerciante é o emissor da
nota fiscal e responsável pelo pagamento dos tributos devidos. Algumas dúvidas podem
surgir com relação a responsabilidade fiscal pelo fato do comprador pagar o cupom para o
site de compra coletiva, mas ele é apenas um intermediário, pois quem esta vendendo um
produto é o comerciante. Uma situação parecida ocorre com os integradores de meios de
pagamento, como é o caso do PagSeguro. Eles também prestam um serviço ao
comerciante que inclui o recebimento do valor e o repasse do pagamento, mas, assim como
os sites de compra coletiva, não são responsáveis pelo tributo, por serem apenas
intermediários prestadores de serviços.
(V) Comprador recebe o produto adquirido: Com o cupom em mãos, o comprador pode ir
até o local de entrega do produto e receber ou utilizar o serviço. O prazo de validade pode
variar de acordo com a promoção e o produto, mas geralmente giram em torno de cinco
meses após a aquisição.
Logo após o recebimento do cupom, o comprador pode retirar o produto dentro de
um prazo de validade pré-estabelecido. A oferta indicará o prazo inicial e final para a
utilização do cupom de acordo com a conveniência do comerciante e também do site de
compra coletiva.
Os comerciantes evitam encaixar as promoções em períodos ou dias de movimento,
para não criar problemas que afetem a qualidade no atendimento.
24
2.1.3.2 Sites de compra coletiva segmentado
De acordo com VALLE (2011) o empreendedor digital enfrenta atualmente um
cenário favorável e desafiador. O acompanhamento de ofertas em sites de compra coletiva
já se transformou em um hábito em grande parte dos internautas, o que inclusive já causou
a primeira conseqüência dos sites de compra coletiva, os sites agregadores de ofertas como
o Save.Me. A tendência é que esse comportamento venha a ser seguido pelos novos
usuários que chegam ao mercado, principalmente os que pertencem às classes C e D, os
novos e importantes participantes do mercado digital que já respondem por mais de 50%
das compras online. O desafio portanto é desenvolver uma estratégia que não só atraia
estes novos usuários, mas que também os fidelize transformando-os em visitantes assíduos
dos sites de ofertas.
O caminho natural dos sites de compra coletiva daqui para frente é a segmentação e
já estamos vendo isso acontecer como mostra a FIGURA 5 e FIGURA 6. Recentemente
foram lançados sites de compra coletiva altamente segmentados, como os que tem como
destaque pet shops, mercado rural, hoteleiro e até de cursos online. As opções são as mais
variadas possíveis e o que cria o diferencial é o foco em uma base de usuários altamente
segmentada e ofertas focadas nos interesses dessa base, o que é a tendência que se
desenha no cenário atual.
Fonte: <http://www.valejunto.com.br/compra-coletiva/ofertas.php>
FIGURA 5 – Modelo de um site de compra coletiva com segmentação.
25
Fonte: <http://radardedescontos.com.br>
FIGURA 6 – Outro modelo de um site de compra coletiva com segmentação.
2.1.3.3 Tipos de sistemas de compras coletivas
De acordo FAUST (2011) os principais tipos de sistemas de compras coletivas são:
Scripts de compra coletiva: Muitos desses tipos de sites foram traduzidos para o
português e adaptados para necessidades brasileiras, e encontram-se à venda pela rede.
Há inclusive, versões gratuitas, de código aberto que prometem rodar as promoções ofertas
diárias. Porém essa opção é indicada apenas para empreendedores com conhecimentos
tecnológico avançado, é preciso fazer customizações que se bem feito pode salvar muito
tempo e dinheiro.
Plataformas prontas: Essa é uma opção que vem cada vez mais sendo utilizada. No Brasil,
ClickOn e Peixe Urbano fizeram associações com grandes companhias de mídia, rodando
sistemas em um tipo de parceria. Mas essas são negociações de grande porte, que
envolvem grandes marcas dos dois lados. Já entre sites menores, está se tornando cada
vez mais comum a associação para o compartilhamento de plataformas.
Sistema próprio: Mais indicado para quem tem conhecimentos em programação,
experiência com companhias de internet ou fácil acesso a desenvolvedores, além de saber
exatamente o que quer. Porém as dificuldades de se desenvolver um sistema são inúmeras,
por isso indicada apenas para especialistas pois os riscos são vários. Desenvolver um
26
sistema desde o início, pode acabar sendo uma alternativa até mais cara do que usar um
sistema pronto. Porém se bem desenvolvido, os benefícios são exclusivos além de uma
solução única do mercado.
2.1.4 Frameworks Web
Quando uma empresa procura implementar um sistema de comércio eletrônico de
forma a agilizar seus negócios e se tornar mais competitiva, ela possui uma série de
soluções técnicas e comerciais para escolher, incluindo soluções empacotadas ou seja
soluções baseadas em um framework BOOCH(2004).
Uma solução baseada em framework tem como paradigma a capacidade de se
desenvolver e implantar novos componentes independentes, dividindo uma solução
completa em partes menores que incorporam, além da codificação, a análise e o projeto de
uma funcionalidade da solução. O framework poderia ser evoluído continuadamente com a
criação de novos componentes responsáveis por novas funcionalidades individuais de cada
componente utilizado.
Os componentes são facilmente reutilizáveis, pois constituem blocos independentes,
com interfaces bem definidas. Assim os benefícios de usar um framework de qualidade
usando código aberto são claros em termos de:
• Redução de custos;
• Redução de time-to-market;
Motivos:
• Maximização de re-uso (análise, design, código, testes);
• Desenvolvedores se concentram em adicionar valor em vez de reinventar o
que já existe;
• Menos manutenção;
• Melhor consistência e compatibilidade entre aplicações;
• Alavancagem do conhecimento de especialistas;
• Framework oferece uma forma de empacotar o conhecimento de especialistas
sobre domínios de problemas;
• Assim, não se perde o conhecimento com a saída de especialistas e o
conhecimento pode ser usado/estudado sem a presença do especialista.
27
2.1.4.1 Zend Framework
O Zend Framework é um framework para aplicações Web de código aberto,
orientado a objetos, que utiliza PHP 5. Foi lançado em 2005 sobre a licença New BSD
Licence, aprovada pela OSI. O Zend Framework, muitas vezes chamado de ZF, foi criado
para ser uma plataforma leve e flexível, que segue as melhores práticas de programação, já
tendo sido adotado por várias grandes corporações incluindo a IBM, Adobe e Oracle
(MCCOMBS e BANH, 2009).
2.1.4.2 Plataforma osCommerce
Conforme o site oficial osCommerce (2011), este é um framework voltado para o
comércio eletrônico lançada em março de 2000, que permite funcionalidades de loja on-line
para ser configurada rapidamente com facilidade.
E está disponível gratuitamente pois é baseada na filosofia open source, é
desenvolvido em PHP e MySQL.
O osCommerce conta com uma comunidade grande e ativa, no qual os membros
discutem questões referentes ao desenvolvimento do mesmo, a (FIGURA 7) exibe um
modelo de loja com a plataforma.
Fonte: <http://demo.oscommerce.com>
FIGURA 7 – Demonstração osCommerce Online.
28
2.1.4.3 Plataforma Magento
Segundo MCCOMBS e BANH (2009) o Magento é uma plataforma de comércio
eletrônico open source lançado oficialmente em março de 2008 por Varien (FIGURA 8).
O Magento é baseado no Zend Framework o que possibilitou à Varien desenvolver o
Magento em um intervalo de tempo relativamente curto, além de permitir a separação em
Model-View-Controler (MVC), podendo ser personalizado tendo conhecimentos de HTML,
CSS, XML, MySQL, PHP para customizações mais avançadas.
Fonte: <http://www.magentocommerce.com/demo>
FIGURA 8 – Demonstração Magento Online.
Uma das grandes vantagens do Magento é que ele permite que sejam projetados
múltiplos websites que podem compartilhar da mesma interface, não sendo preciso se
conectar a múltiplos locais para administrar vários websites, ou seja o Magento tem
capacidade de administrar todos em um único backend.
O mesmo ainda oferece suporte a mais de 60 idiomas, múltiplas moedas e taxas de
impostos. Isso oferece habilidade de expandir seu negócio facilmente mundialmente
(MCCOMBS e BANH, 2009).
O CMS possui em sua estrutura de arquivos em três seções principais: núcleo
(core), funcionalidade e design. Isso permite fácil atualização de imagens e estilos CSS,
sem afetar a funcionalidade do site. A funcionalidade da loja também pode ser customizada
29
sem afetar o core do Magento. Como resultado, é possível modificar o programa sem que as
atualizações futuras afetem a atual. Oferece também várias funções para emissão de
relatórios, que permitem fácil visualização dos relatórios de vendas, produtos mais vendidos
e informações dos consumidores. Além de ter um grande apoio da comunidade, conta com
um fórum publico e monitoramento de bugs, também tem seu próprio repositório publico de
extensões chamado Magento Connect.
Uma vez que o Magento está licenciado sob licença de tipo OSL, a Magento
Community Edition encontra-se disponível sem qualquer custo adicional.
Assim permite que os desenvolvedores e proprietários de websites de E-commerce
possam diminuir seus custos com softwares.
2.1.5 Padrões de Projeto
Os padrões de projeto também conhecido como Design Patterns propõe soluções
para problemas relacionados ao desenvolvimento de software orientados a objetos.
GAMA (1995) relata que a idéia de padrões foi apresentada por Christopher
Alexander em 1977 no contexto de Arquitetura (de prédios e cidades):
“Cada padrão descreve um problema que ocorre repetidamente de novo e de novo em
nosso ambiente, e então descreve a parte central da solução para aquele problema de uma
forma que você pode usar esta solução um milhão de vezes, sem nunca implementa-la duas
vezes da mesma forma.”
PIMENTEL (2010), diz que os padrões de projetos podem ser classificados em três
tipos diferentes:
Padrões de criação: Está relacionado ao processo de criação de objetos a partir da
instanciação de classes.
Padrões estruturais: Os padrões estruturais se preocupam com a forma como as
classes e objetos são compostos para formar estruturas maiores.
Padrões comportamentais: Preocupam-se com algoritmos e a atribuição de
responsabilidade entre objetos ou seja é a maneira na quais objetos interagem.
30
2.1.5.1 Arquitetura MVC
De acordo com GAMA (2000) o MVC tem como principal objetivo: separar dados
(Model) da interface do usuário (View) e o fluxo da aplicação (Controller) conforme mostra a
FIGURA 9.
Consiste em três elementos, conforme descrito abaixo:
Modelo ou Model: Representa os objetos de dados. É o que está sendo manipulado
e apresentado ao usuário.
Visão ou View: Apresentação do modelo na tela. É o objeto que apresenta o estado
dos objetos de dados.
Controlador ou Controller: Define a forma com que a interface com o usuário reage
às entradas de um usuário, ou seja, manipula o objeto.
A ideia é permitir que uma mensagem da lógica de negócios possa ser acessada e
visualizada através de várias interfaces. Na arquitetura MVC, á lógica de negócios, ou seja,
o Model não sabe quantas nem quais as interfaces com o usuário esta exibindo seu estado,
a view não se importa de onde esta recebendo os dados, mas ela tem que garantir que sua
aparência reflita o estado do modelo, ou seja, sempre que os estados do modelo mudam, o
modelo notifica as view para que as mesmas atualizem-se (BAPTISTELLA, 2010).
Suas principais características são:
Separação entre os códigos, View e Controller que gerencia as relações entre
o Model e a View.
Separa a lógica de negócios da apresentação.
Possui re-usabilidade, é possível criar bibliotecas e adicionar interfaces
facilmente.
É possível desenvolvê-lo em paralelo, ou seja, pode começar o projeto por
qualquer camada.
Divide as responsabilidades, ou seja, programadores na programação e Web
designers na construção visual do software.
Reduz o esforço na manutenção do software, pois as alterações são
efetuadas separadamente não afetando as outras camadas do sistema.
31
Fonte: GAMMA (2000)
FIGURA 9 – Arquitetura MVC em aplicações Web.
Ainda de acordo com GAMMA (2000), os padrões de projetos auxiliam para um
melhor entendimento d a arquitetura MVC, no qual é possível perceber que por traz do MVC
pode conter um conjunto de padrões em uma mesma estrutura trabalhando juntos como por
exemplo padrão comportamental e padrão estrutural.
2.1.6 Linguagem de programação e ferramentas
2.1.6.1 PHP
A linguagem utilizada no projeto é o PHP, que é uma linguagem de script, muito
utilizada para o desenvolvimento de aplicações Web e pode ser embutida no HTML.
De acordo com o site oficial do PHP, as maiores vantagens para a escolha do PHP
como linguagem de programação são: Eficiente suporte matemático, sistema
multiplataforma, suporte a um grande número de banco de dados, código aberto além da
simplicidade que oferece em contraposição aos recursos avançados de que dispõe a
32
linguagem. Cada porção de código PHP é iniciada pela instrução de processamento <?php
e finalizada pela instrução ?>.
O código é executado do lado do servidor, gerando HTML que então é enviado para
o cliente, onde o cliente pode receber os resultados da execução do script, mas não pode
ver o código fonte.
A linguagem possui diversas funcionalidades como: coletar dados de formulários,
gerarem páginas com conteúdo dinâmico ou enviar e receber cookies entre muitas outras
funcionalidades.
2.1.6.2 JavaScript
De acordo com SILVA (2010) JavaScript é uma linguagem desenvolvida para rodar
do lado do cliente ou seja a interpretação e o funcionamento da linguagem dependem de
funcionalidades do navegador do usuário que tem um interpretador JavaScript hospedado
no navegador, então para que a linguagem possa ser executada é preciso um navegador..
Tanto a Microsoft quanto a Netscape desenvolveram interpretadores JavaScript para
serem hospedados no servidor, tornando possível rodar JavaScript no lado do servidor. A
empresa Mozilla lançou duas versões do interpretador: Spider Monkey escrita em C e Rhino
escrita em Java.
Com o JavaScript é possível escrever marcação HTML e inserir a marcação dentro
de um documento já existente, como: Inserir data/hora, inserir mensagem de boas vindas,
gerar HTML de uma página, controlar o comportamento do navegador como: mostrar
mensagens ao usuário, criar janelas pop-up, alterar as dimensões do navegador, fechar e
abrir janelas, interferir na barra de status, retirar menus, interagir com formulários, interagir
com outras linguagens dinâmicas, além da linguagem suportar programação orientada a
objetos.
33
2.1.6.3 AJAX
AJAX refere-se a um conjunto de tecnologias que tem como objetivo o carregamento
de conteúdos de uma página Web com o uso de JavaScript e XML, HTML, PHP, ASP ou
qualquer linguagem de marcação ou programação capaz de ser recuperada de um servidor
(SILVA, 2010).
O AJAX agiliza as tarefas de requisição ao servidor, ou seja, com ele é possível
renderizar uma página, utilizando recursos de scripts rodando pelo lado cliente, buscando e
carregando dados em background sem a necessidade de reload da página. Esta técnica só
funciona graças a linguagem JavaScript no qual é totalmente dependente (ROSA, 2009).
Em uma aplicação Web comum o navegador precisa buscar as informações no
servidor e retornar para o cliente, no AJAX acontece de outra maneira. Quando ocorre o
carregamento da página, toda a lógica de processamento é passada para o cliente. Então
quando o usuário faz uma requisição, quem busca e traz essas informações é o JavaScript
de forma assíncrona que impede que aconteça o reload na tela. O script fica responsável
pelo tratamento dos dados e formato de exibição.
Inicialmente o processo é mais lento que normalmente devido ao fato de que muitas
informações estão sendo pré-carregadas. Logo, o site se torna mais rápido pois somente os
dados são carregados (ROSA, 2009).
2.1.6.4 XML
XML é uma linguagem de marcação de dados extensível no qual provê um formato
para descrever dados estruturados que facilita declarações mais precisas do conteúdo.
É uma linguagem utilizada para descrever outras linguagens no qual permite que o
usuário defina a própria marcação. XML é escrito em SGML, uma metalinguagem padrão
para marcação de texto (NESI,2009).
34
2.2.5 Banco de Dados
De acordo com SILBERCHATZ (2006) um SGDB, trata-se de uma coleção de dados
inter-relacionados e um conjunto de programas para acessar esses dados. A coleção de
dados normalmente é conhecida como banco de dados no qual pode conter informações
importantes de uma empresa.
O objetivo principal de um SGDB é fornecer uma maneira de recuperar informações
de um banco de dados eficientemente.
O sistema de banco de dados precisa garantir a segurança das informações
armazenadas, além do mais o gerenciamento de dados envolve definir estrutura para que
informações possam fornecer mecanismos para manipulação de informação.
Algumas aplicações do banco de dados:
-Banco: Para transações bancárias, informações de clientes, empréstimos, contas.
-Transações de cartões de crédito: Para compra com cartão de crédito.
-Vendas: Para informações de cliente produto e compra.
O banco de dados utilizado no projeto é o MySQL que é um SGDB Open Source, que
utiliza a linguagem SQL como interface (site oficial do MySQL).
Algumas de suas características são:
- Facilidade de uso
-Portabilidade
- É um software livre
- Compatibilidade com linguagens de programação como: (PHP, ASP,Java, Delphi,
C/C++, Ruby, Phython)
-Não exige muitos recursos de hardware
-Excelente desempenho e estabilidade
-Suporta Triggers
Além de ser executado em mais de 20 plataformas como: Linux, Windows, Solaris,
Mac OS, etc.
35
2.1.7 Software código aberto
Em 1983, Richard Matthew Stallman lançou o Projeto GNU, para criar um sistema
operacional gratuito, do tipo Unix. Esse projeto levou a criação de softwares livres como o
gcc, o GNU C Compiler, entre outros softwares livres instrumentais que originaram o Linux
(MCCOMBS e BANH, 2010).
O software open source deve oferecer acesso ao código-fonte como também ser
distribuídos como software livre. O que dá ao usuário o direito de modificar, redistribuir, e
utilizar o software, seja em formato modificado ou não CAMPOS (2006).
36
2.2 METODOLOGIA DE DESENVOLVIMENTO
2.2.1 Ferramentas utilizadas
• Linguagem de Programação PHP
• Framework Web Magento na versão 1.4.1
• Banco de Dados MySQL
2.2.2 Diagramas de caso de uso
Os diagramas apresentados a seguir representam os caso de uso do sistema. Os
três atores são o cliente, o administrador e o sistema.
A FIGURA 10 representa o cliente que possui os processos "Cadastrar cliente",
"Efetuar compra", "Obter cupom", "Autenticar cliente" e "Listar histórico de compras".
FIGURA 10 – Diagrama de caso de uso do ator cliente.
37
Os processos do administrador mostrado na FIGURA 11 são: "Cadastrar oferta" e
"Cadastrar fornecedor".
FIGURA 11 – Diagrama de caso de uso do ator administrador.
Já o sistema possui os processos: "Processar pagamento", "Disponibilizar oferta",
"Desativar oferta", "Notificar resultado da oferta", "Notificar oferta ao cliente" representado na
FIGURA 12.
FIGURA 12 – Diagrama de caso de uso do ator sistema.
38
2.2.3 Protótipos do site
Na FIGURA 13 é mostrado o protótipo da página principal com as principais
funcionalidades de um site de compra coletiva.
FIGURA 13 – Protótipo da oferta do dia (página principal)
Já em ofertas anteriores é possível visualizar a segmentação, onde o cliente poderá
verificar as ofertas por categoria como mostra a FIGURA 14.
39
FIGURA 14 – Protótipo das ofertas anteriores.
2.2.4 Instalações e configurações do Magento
Para instalação do Magento é preciso um servidor Web rodando ou servidor local,
que tenha suporte a PHP além de um servidor de banco de dados, foram utilizados para
instalação um servidor Web na plataforma Linux, servidor Apache, PHP e banco de dados
MySQL.
Primeiramente foi criado um subdomínio (FIGURA 15) que pode ser acessado
através do endereço http://www.loja.fcmdesign.com.br, logo em seguida um novo
banco de dados com o nome de loja_virtual foi criado através do cPanel como mostra a
FIGURA 16.
40
FIGURA 15 – Criando subdomínio: http://www.loja.fcmdesign.com.br/
FIGURA 16 – Criando banco de dados através do cPanel.
Logo em seguida foi criado um usuário com o nome de fabiola que irá acessar a
base de dados (FIGURA 17) e foi dado todos os acessos a este usuário (FIGURA 18).
41
FIGURA 17 – Criando usuário fabiola ao banco de dados.
FIGURA 18 – Todas as permissões foram dadas á usuária fabiola.
Neste momento é possível acessar diretamente o servidor, através do endereço
http://www.loja.fcmdesign.com.br e ser direcionado ao programa de instalação
(FIGURA 19).
42
FIGURA 19 – Instalação do Magento.
Depois de aceita a licença, é preciso informar o servidor de banco de dados,
login, senha, ou seja, aquelas informações que foram criadas anteriormente através do
cPanel, será necessário informar o E-mail e senha do administrador em seguida
(FIGURA 20).
Feito isso está pronto, será mostrado o login e senha do administrador que já
poderá acessar a parte administrativa do site através do endereço
http://loja.fcmdesign.com.br/admin e a página principal através do subdomínio
criado anteriormente.
FIGURA 20 – Conexão com o banco de dados.
43
2.2.5 Interface do Magento
De acordo com MCCOMBS e BANH (2009) o Magento é composto por duas
interfaces diferentes. Existe uma interface pública aberta a todos que visitam o website, e
uma interface de administração que pode ser visualizada apenas por aqueles que possuem
acesso.
A interface pública do Magento permite o usuário manipular a forma pela qual a loja é
projetada e também alterar como é feita a promoção dos produtos. Com o Magento é
possível editar layout, esquema de cores, fotos e conteúdo para que se encaixem á cada
situação em particular a FIGURA 21 mostra a frontend padrão do Magento MCCOMBS e
BANH (2009).
FIGURA 21 – Frontend default do site.
Já a interface de administração é responsável por controlar tudo que é visualizado
na interface pública. Nela, é possível gerenciar e examinar pedidos, atualizar informações
de clientes e adicionar novos produtos à loja MCCOMBS e BANH (2009).
44
É possível se conectar à interface administrativa do site acessando o endereço:
http://www.loja.fcmdesign.com.br/admin.
Uma vez feito o login (FIGURA 22), o administrador será redirecionado para o painel
administrativo (FIGURA 23).
FIGURA 22 – Painel de login ( interface de administração).
FIGURA 23 – Backend do site (área administrativa).
2.2.6 Estrutura de arquivos do Magento
De acordo com MCCOMBS e BANH (2010) a arquitetura de templates do Magento
foi estruturada com o objetivo de permitir a atualização de múltiplas páginas ao mesmo
tempo, o mesmo separa a camada de conteúdo da camada de apresentação.
Um tema pode ser dividido nas três áreas:
45
Templates em PHTML – O PHTML é herdado do Framework Zend. Semelhante ao
HTML, os arquivos PHTML são responsáveis pelo core dos temas do Magento, oferecendo
uma estrutura básica da loja.
Layouts em XML – Os layouts em XML podem ser utilizados para especificar quais
blocos devem ser exibidos em um grupo de páginas. Nos quais esses blocos podem ser:
textos, imagens, um carrinho de um cliente, etc.
A skin – Esta sessão skin refere-se a uma pasta que contém os arquivos CSS,
imagens e arquivos JavaScript. Basicamente, todos os arquivos não relacionados a
estrutura são colocados nessa pasta.
Fazendo uma analogia: É possível pensar nos temas do Magento como um jogo de
futebol americano no qual os layouts em XML são o livro de jogadas e definem o que o
arquivo PHTML deve carregar. Os arquivos PHTML são os jogadores, cada um seguindo a
própria rota. Skin representa as cores dos uniformes dos jogadores.
Os templates em PHTML e os layouts em XML estão contidos no diretório app,
enquanto os arquivos e pastas da skin estão todos contidos no diretório da skin, a FIGURA
24 mostra os arquivos visualizados através de um FTP.
FIGURA 24 – Destacando os diretórios app e skin, que abrigam todos os principais componentes de
um tema do Magento.
46
No diretório app para navegar até a página do tema-padrão é possível encontrar as
pastas layout e template (FIGURA 25) no qual estão contidos na pasta template todos os
templates ems PHTML (FIGURA 26), enquanto os arquivos de layout XML, estão na pasta
layout conforme mostra a FIGURA 27.
FIGURA 25 – No diretório app.
FIGURA 26 – No diretório dos layouts contidos na pasta app.
47
FIGURA 27– No diretório dos templates em PHTML, contido na pasta app.
A FIGURA 28 mostra os arquivos dento do diretório skin. Onde todos os arquivos
CSS,HTML, JavaScript estão contidos.
FIGURA 28 – No diretório skin. Esta pasta contém os arquivos CSS, imagens e arquivos JavaScript.
48
2.2.7 Customizações no site de compra coletiva
Depois de instalado o Magento, configurado seu idioma, moeda, dentre outras
configurações iniciais, o próximo passo foi configurar e customizar o Magento para que ele
seja transformado em um modelo de site de compra coletiva.
2.2.7.1 Cadastro de cidades para as ofertas
Primeiramente é preciso ter as cidades onde serão disponibilizadas as ofertas. O
projeto utilizará a cidade de Itatiba e Morungaba.
As duas cidades serão administradas em um único backend, pois o Magento possui
um gerenciamento de múltiplas lojas e as ofertas serão separadas por cidade e categoria.
De acordo com SAM (2010) essa funcionalidade já está implementada e é composta
por website , loja e visão e cada uma dessas citadas tem uma função:
Website: O website funciona com um shopping pois dentro dele torna-se possível ter várias
lojas que no projeto serão as cidades de Itatiba e Morungaba. No projeto o webstite será
chamado de “Website compra coletiva” como mostra FIGURA 29.
FIGURA 29 – Projeto website compra coletiva.
Loja: É nesse ponto que as lojas são criadas (FIGURA 30 e FIGURA 31)
(Itatiba/Morungaba), elas funcionam como um ponto de venda pois cada cidade é um ponto
de venda que pode vender produtos distintos. No projeto cada cidade irá funcionar como um
49
grande lojista onde poderá criar um ponto de venda para cursos, eletrônicos, roupas,
estética, etc.
FIGURA 30 – Cadastrando a loja da cidade de Itatiba.
FIGURA 31 – Lojas de Itatiba e Morungaba mostrada no backend.
Visão: A visão funciona como a vitrine da loja (a parte visual) , somente uma visão por vez
pode ser apresentada, porém uma loja pode ter diversas visões (FIGURA 32).
FIGURA 32 – Visão das cidades de Itatiba e Morungaba.
50
2.2.7.2 Criação de categorias e subcategorias
Os produtos ou promoções são separados por cidade e cada produto esta vinculado
a uma categoria. Sendo assim foi preciso criar uma categoria principal para cada loja criada
(FIGURA 33) e na seqüência criar uma subcategoria que se refere ao tipo de produto
disponível no site (FIGURA 34). Logo é possível a visualização da segmentação na frontend
(FIGURA 35).
FIGURA 33 – Cadastrando categoria para a loja de Itatiba.
51
FIGURA 34 – Categorias e subcategorias criadas.
FIGURA 35 – Categorias e subcategorias criadas.
52
2.2.7.3 Inserindo ofertas no site
De acordo com FAUST (2011) a oferta deve ser muito bem trabalhada pois se o
cliente abre a oferta e vê uma imagem tentadora, um preço irresistível, com um texto e
descrição bem informativo no qual dá detalhes de como o cliente irá se divertir se participar
daquela promoção. No canto da tela um relógio marca o tempo em contagem regressiva. O
cliente vai achar que é preciso comprar e logo!
É muito importante uma oferta bem apresentada, pois esse tipo de negócio trata-se
de compras por impulso SAM (2011).
Conforme MCCOMBS e BANH (2010) no Magento é possível observar que existem
seis tipos de produtos que podem ser cadastrados. Segue descrição:
1-) Produto Simples: Como o próprio nome já diz é um produto simples porém com
muitos recursos.
2-) Produto Configurável: Permitem aos consumidores escolherem atributos
referentes a compra como: cor, tamanho.
Ex: sapatos, roupas.
3-) Produto Agrupado: Permite que seja vendido um grupo de produto simples que
tenha sido agrupado.
Ex: Uma camisa e uma gravata que combina com talheres (colheres, facas, garfos).
4-) Produto Virtual: Produtos virtuais podem ser adquiridos mais tipicamente não
são produtos físicos.
Ex: Um cupom (que será utilizado no site de compra coletiva), garantias, suporte
técnico, etc.
5-) Pacote de Produtos: É um produto que é a soma de outros produtos.
Ex: Livros em série, computadores e seus acessórios como: gabinetes, CPU,
memórias RAM, monitores.
6-) Produto Digital: Sua entrega pode ser feita através de download após a compra.
Ex: arquivos PDF, softwares, cupons, fotos, imagens, música.
Além do tipo de produto a ser vendido é necessário informar também o grupo de
atributos deste produto comercializado. O Magento traz por padrão o grupo padrão que é
um conjunto de atributos genéricos para um produto.
Porém ele oferece a opção de criar novos grupos de atributos, assim é possível criar
grupos especializados para determinados produtos como exemplo: Um CD que possui
faixas de músicas, ou um livro que possui informações como: autor, número de páginas, etc.
53
É possível personalizar um grupo de atributos para vender um cupom promocional.
Assim para começar serão criados todos os atributos que serão necessários e que
ainda não existem cadastro no Magento, como por exemplo: a quantidade mínima para
cadastrar ofertas, entre outras peculiaridades que a oferta venha oferecer.
A FIGURA 36 mostra o atributo quantidade mínima para ativar a oferta que será
utilizada mais adiante.
FIGURA 36 – Criando atributo quantidade mínima para ativar a oferta.
Depois de criado o atributo qtd_min_ativar_oferta terá que ser criado o atributo
cupom (FIGURA 37)
FIGURA 37 – Criando Cupom.
54
Logo em seguida foi criado um produto mostrado na FIGURA 38, na seqüência as
informações dos produtos (FIGURA 39) e preço do produto (FIGURA 40).
FIGURA 38 – Criando produto.
FIGURA 39 – Informações de produtos.
55
FIGURA 40 – Inserindo preço no produto.
2.2.7.4 Visualizando promoção na página principal
A oferta do dia deverá ficar na página principal da loja, para isso foi editada á página
home, que por padrão é a página a ser exibida inicialmente na frontend.
Foi utilizado um recurso do Magento chamado Widget (FIGURA 41).
FIGURA 41 – Configurando novos produtos para pagina principal.
56
2.2.7.5 Calculando tempo restante da oferta
A fim de exibir um temporizador que mostra em tempo real quanto tempo falta para a
oferta terminar, foi implementado um recurso do tipo timer.
Esta fase do projeto envolve a customização de recursos que não estão prontos no
Magento. Portanto foram criadas as próprias funcionalidades personalizadas para que assim
possam se adaptar ao sistema as necessidades.
Para isso foi inserido um código JavaScript que funciona como um contador
regressivo e atualizará a página constantemente, exibindo o cronômetro com o tempo
restante como mostra a FIGURA 42.
Em primeiro lugar a preocupação não é com a parte gráfica do relógio e sim com a
funcionalidade e eficiência do sistema.
Segue código JavaScript do cronômetro e regressivo inserido no arquivo
new_list.phtml.
QUADRO 4 – Código Relógio Regressivo em JavaScript.
<!-- CODIGO ADICIONADO DENTRO DA DIV f-fix -->
<script type="text/javascript">
function cal_time( secs, num1, num2 ) {
var s = ((num1==3600) ? ((Math.floor(secs/num1))).toString() :
((Math.floor(secs/num1)%num2)).toString());
if ( s.length < 2 ) s = "0" + s;
return ""+ s +"";
}
<?php $data_limite = Mage::getModel('catalog/product')-
>getResource()->formatDate( $_product->getnews_to_date(),false ).'
23:59:59'; ?>
var dt_fim = "<?php echo gmdate("m/d/y h:i:s A", strtotime(
$data_limite )); ?>";
var dt_ini = "<?php echo gmdate("m/d/y h:i:s A", strtotime(
Mage_Core_Model_Locale::date(null, null ,"en_US",true))); ?>";
function Contador(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = "<span
57
class='hour'>00</span>:<span class='min'>00</span>:<span
class='sec'>00</span>";
//vc pode esconder botao de compra aqui usando um display none!
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g,
cal_time(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, cal_time(secs,3600,96));
DisplayStr = DisplayStr.replace(/%%M%%/g, cal_time(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, cal_time(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if ( RelogioOn ) setTimeout("Contador(" + (secs+CountStepper) +
")", SetTimeOutPeriodo);
}
if ( typeof(DisplayFormat) == "undefined" ) DisplayFormat = "<span
class='hour'>%%H%%</span>:<span class='min'>%%M%%</span>:<span
class='sec'>%%S%%</span>";
if ( typeof(RelogioOn) == "undefined" ) RelogioOn = true;
if ( typeof(CountStepper) != "number" ) CountStepper = -1;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0 ) RelogioOn = false;
var SetTimeOutPeriodo = (Math.abs(CountStepper)-1)*1000 + 990;
document.write("<span id='cntdwn'></span>"); //pode ser colocado
direto no codigo tb!
var dthen = new Date(dt_fim); var dnow = new Date(dt_ini);
var ddiff = (CountStepper>0) ? new Date(dnow-dthen) : new
Date(dthen-dnow);
var gsecs = Math.floor(ddiff.valueOf()/1000);
Contador(gsecs);
</script>
<!-- FIM DO CODIGO ADICIONADO -->
58
FIGURA 42 – Relógio Regressivo.
2.2.7.6 Exibir preço normal e desconto da oferta
No site serão exibidos dois preços, o normal e o promocional. O calculo dinâmico de
percentual de desconto aplicado ao produto foi adaptado, pois não esta implementada no
Magento. Foi incluída a linha de código em PHP dentro do arquivo new_list.phtml.
QUADRO 5 – Código desconto.
<!-- CODIGO ADICIONADO ABAIXO DA LINHA getPriceHtml --> <p style="clear: both;">Desconto de <?php echo (100-ceil(($_product->getspecial_price() / $_product->getprice()) *
O que o código acima fez foi receber os preços (normal e promocional) e depois
aplicar um cálculo matemático simples para chegar ao percentual de desconto aplicado no
produto, como mostra a FIGURA 43.
59
FIGURA 43 – Exibindo Desconto.
2.2.7.7 Quantidade de ofertas vendidas
Com o fim de concluir as customizações da tela de promoção em destaque, foi
implementado um código que exibe a quantidade de ofertas vendidas e informa quantas
ainda faltam vender para que a oferta entre em vigor.
Foram utilizados alguns daqueles atributos do tipo cupom que foi criado
anteriormente.
Primeiramente foi criado o código de como exibir o número de vendas mínimas
exigidas para que a oferta entre em vigor. Anteriormente foi criado um atributo chamado
qtd_min_ativar_oferta que foi utilizado nesta etapa do projeto.
Dentro do arquivo news_list.phtml foi inserido o código a seguir que é responsável
por chamar o atributo produto:
QUADRO 6 – Código quantidade de ofertas vendidas.
<!-- CODIGO ADICIONADO ABAIXO DO foreach --> <?php $_product->load( $_product->getId() ); ?> ... <!-- CODIGO ADICIONADO ABAIXO DO desconto --> <?php $qtd_ativar = $_product->getResource()->getAttribute('qtd_min_ativar_oferta')->getFrontend()->getValue(
$_product ); ?> <p style="clear: both;">Mínimo de <?php echo $qtd_ativar; ?> para ativar a Oferta!</p>
60
Depois de chamar um atributo do produto, é possível fazer o mesmo para exibir o
mapa de localização da empresa ao lado de sua descrição. Foi criado um campo para o
Google maps com o nome de “url_google_maps”. Então o código ficou da seguinte maneira:
QUADRO 7 – Código exibe mapa de localização da empresa.
<!-- CODIGO ADICIONADO ABAIXO DO script de timer --> <!-- mais informacoes sobre google maps em:
http://code.google.com/intl/pt-
BR/apis/maps/documentation/staticmaps/ --> <img src="http://maps.google.com/maps/api/staticmap?center=<?php
echo $_product->getResource()->getAttribute('url_google_maps')-
>getFrontend()->getValue( $_product );
?>&zoom=14&size=400x400&markers=color:red|label:A|<?php echo
$_product->getResource()->getAttribute('url_google_maps')-
>getFrontend()->getValue( $_product ); ?>&sensor=false" alt="mapa localizacao google">
Logo foi preciso criar um método que exibe quantos itens já foram vendidos ou
solicitados esse foi um pouco mais trabalhoso, pois envolve as regras de negócios
particulares da empresa como exemplo:
Existe uma diferença entre comprar e pagar no Magento. Quando um cliente compra
o produto/cupom automaticamente é gerado um pedido que fica sob status de pendente até
que o pagamento seja confirmado ou recusado.
Então até esse ponto já é possível observar que já existe uma decisão estratégica
que irá contar e exibir na tela o número de pedidos realizados (somando pendentes e
faturado) ou apenas somar os que foram pagos/faturados.
Nesse caso foi escolhida a opção de exibir apenas os pedidos confirmados com
pagamento. Então será enfrentado um problema. Já que os operadores de cartão de crédito
podem levar até quarenta e oito horas para aprovar um pagamento e depósito bancário
também só é compensado no dia seguinte. E se for usado um sistema anti-fraude o tempo
de resposta pode ser ainda mais lento.
Ou seja, é possível ter pedidos que tenham pagamentos confirmados em até uma
semana depois de realizado o pedido.
Então se imaginar a situação faltando uma venda para ativar a oferta, o tempo se
esgotando e o site com mais de dez pedidos em aberto aguardando confirmação de
pagamento.
61
Uma outra estratégia seria informar sempre um número alto de cupons no estoque
(FIGURA 44), algo como 10.000 (dez mil). Assim, tudo que teria que fazer é subtrair dez mil
pela quantidade de itens atual em estoque do produto para saber quantos foram vendidos.
Isso resolve dois problemas citados acima. Não é preciso controlar datas de pedidos,
e não importa se foi comprados para amigos ou não, o que importa é somente a quantidade
que resta em estoque. O único problema é que sempre um pedido é feito (pendente) é dado
baixa no estoque. Então será contado os pedidos pendentes e pagos.
FIGURA 44 – 10.000 Cupons.
Porém quando um pedido pendente é cancelado, a quantidade deste pedido volta ao
estoque. Então no final das contas, se for cancelado todos os pedidos pendentes e manter
apenas os pedidos pagos, será obtido um valor real de cupons vendidos. Um bom sistema
de pagamento, bem integrado, de resposta rápida, pode fazer toda a diferença SAM(2011).
Para tentar manter a simplicidade foi optado pela opção de controlar apenas o
estoque com base nos dez mil itens. Porém é possível criar outras soluções.
Abaixo é mostrado o código que foi utilizado para controlar a quantidade vendida
através do numero em estoque.
QUADRO 8 – Código exibe mínimo para ativar oferta.
<!-- CODIGO ADICIONADO ABAIXO DO minimo p/ ativar --> <?php $qtd_vendida = (10000 - Mage::getModel('cataloginventory/stock_item')-
>loadByProduct($_product)->getQty()); ?> <p style="clear: both;">Foram Vendidos <?php echo $qtd_vendida; ?>
Cupons</p>
62
Depois que se obtém o número de ofertas vendidas, é possível verificar se o seu
valor ultrapassa o número de ofertas mínimas para entrar em vigor através do código listado
abaixo:
QUADRO 9 – Código exibe número de ofertas mínima para ativar ofertas.
<!-- CODIGO ADICIONADO ABAIXO DO foram vendidos -->
<p style="clear: both;">Oferta <?php if ($qtd_vendida>=$qtd_ativar)
echo 'ativa'; else echo 'em stand by'; ?></p>
Isso irá informar aos visitantes se a oferta já está valendo ou não como mostra a
FIGURA 45.
FIGURA 45 – Quantidade de ofertas vendidas.
63
2.2.7.8 Conexão com redes sociais e microblogs
Atualmente as mídias sociais estão crescendo rapidamente, e tudo indica que
continuarão crescendo cada vez mais. E um site de compras coletivas casa muito bem com
redes sociais SAM (2011).
Como o Magento não oferece muitos recursos nativos de compartilhamento de
mídias sociais será preciso customizar.
Com o Magento é possível que a página do produto em oferta seja enviada para um
amigo, a página também pode ser divulgada em uma lista de RSS (recurso já
implementado).
Redes sociais como orkut, facebook, linkedin, livemocha ou microblogs como o
twitter. é possível criar e customizar na aplicação.
De acordo com SAM (2011) uma pesquisa realizada pela escola Magento no setor
de compra coletiva foi possível verificar que muitos sites do setor não utilizam essas
poderosas ferramentas para divulgação. Outros disponibilizam apenas suas páginas oficiais
(facebook, orkut, twiter) para quem quiser segui-los. E os que usam para divulgar a oferta,
ainda o fazem de um jeito muito particular, ou seja, não existem padrões a serem seguidos.
Em meio a tantas possibilidades será implementado no site um exemplo da rede
social “facebook” e outro do microblog “twiter”. Mas a partir deles é possível expandir a idéia
para outros meios de divulgação social.
Então foi aberta a página de oferta em destaque, o arquivo new_list.phtml e inserido
o seguinte código para o twitter:
QUADRO 10 – Código para envio de oferta destaque por twitter.
<!-- CODIGO ADICIONADO ACIMA DO nome do produto --> <p style="clear: both;"><a
href="http://twitter.com/home?status=<?php echo $this-
>stripTags($_product->getName(), null, true)
?>.:http://modelo.fcmdesign.com.br/" target="_blank">Twittar esta
Oferta!</a></p>
64
Nesse caso foi usado o nome da própria oferta. Mas poderia ser criado um atributo
novo para o produto/cupom chamado msg_twitter, e personalizar essa mensagem no
backend sempre que for criado uma nova oferta.
O mesmo poderia ser feito para o facebook ou qualquer mídia social.
E quanto a divulgação pelo facebook, poderia ser utilizado um recurso do próprio
facebook chamado de “Curtir/Like”. Ou escrever no murar para compartilhar com os amigos
do usuário, como o código abaixo:
QUADRO 11 – Código para compartilhar oferta pelo facebook.
<!-- CODIGO ADICIONADO ABAIXO DO twittar --> <p style="clear: both;"><a
href="http://www.facebook.com/sharer.php?u=http://loja.fcmdesign.com
/&t=<?php echo $this->stripTags($_product->getName(), null, true)
?>." target="_blank">Compartilhe no Facebook!</a></p>
Para que o usuário possa enviar E-mails aos amigos referente a oferta, foi utilizado
um recurso nativo do Magento bastando inserir o código abaixo na página.
QUADRO 12 – Código para enviar E-mails aos amigos do produto destaque.
<!-- CODIGO ADICIONADO ABAIXO DO compartilhar facebook --> <p><a href="<?php echo $this->helper('catalog/product')-
>getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a
Friend') ?></a></p>
O resultado é mostrado na FIGURA 46 e ao clicar no link o usuário será direcionado
para o facebook conforme FIGURA 47.
65
FIGURA 46 – Avisar um Amigo.
FIGURA 47 – Após clicar em “Compartilhe no Facebook”.
Inegavelmente que além de conectar essas mídias de divulgação nas ofertas,
também é interessante ter um link para a página oficial do twiter e /ou facebook. Um link
simples como o mostrado abaixo já resolve o problema:
66
QUADRO 13 – Código exibe mensagem “Siga-nos no Twitter”.
<a href="http://twitter.com/FCMDesign">Siga-nos no Twitter</a>
2.2.7.9 Configurações para realização de uma venda
Logo após uma série de customizações e configurações torna-se possível trabalhar
na tela de checkout do sistema, no qual entram em discussão a forma de pagamento,
cadastro do cliente, entre outros detalhes a serem tratados.
Em primeiro lugar, quando o usuário clicar no botão comprar ele não será
direcionado para uma tela de carrinho de compras mais pode ser direcionado para uma tela
de checkout.
Com a finalidade de facilitar o máximo do processo, já que a essência desse modelo
de vendas é baseada na compras por impulso. Então o que for possível fazer para agilizar e
simplificar deve ser feito.
Essa alteração pode ser feita no arquivo new_list.phtml é onde esta sendo feita toda
a customização. Atualmente o que o botão de compras faz, é chamar uma URL, que
adiciona o produto ao carrinho de compras e depois redireciona a página. O que foi feito foi
alterar a ação desse botão. Será adicionado o produto ao carrinho por AJAX assim que o
cliente entrar na página (para agilizar o processo), e quando ele clicar no botão comprar
será chamado a URL de checkout (como um link).
QUADRO 14 – Código em AJAX chama URL checkout para agilizar o processo ao clicar em
comprar.
<!-- CODIGO ADICIONADO ABAIXO DO ->isSaleable() --> <button type="button" title="<?php echo $this->__('Add to Cart') ?>" onclick="setLocation('<?php echo $this->getUrl('checkout') ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button> <script type="text/javascript"> //<![CDATA[ new Ajax.Request( "<?php echo $this->getAddToCartUrl($_product)
?>", { method: 'post', onComplete: function(transport) {} }); //]]> </script>
67
A tela de checkout tem quatro etapas: Identificação, informação de cobrança, forma
de pagamento e confirmar pedido. No projeto serão mantidas todas as etapas, porém com
algumas customizações.
A parte de identificação é de extrema importância, é preciso tomar cuidado nas
configurações de backend para evitar que visitantes efetuem compras, logo foi desativada a
opção que permite que visitantes façam pedidos e sim para exibir termos e condições
(FIGURA 48).
FIGURA 48 – Configuração para desativar pedido de visitante e exibir termos e condições.
Para deixar a tela cheia, sem aquela coluna lateral que exibe os passos dos
processos, foi preciso editar o checkout.xml como mostrado abaixo.
QUADRO 15 – Código alterado de 2 colunas para 1 coluna lateral.
<!-- alterado template da reference root de 2columns para 1column em
checkout_onepage --> <action
method="setTemplate"><template>page/1column.phtml</template></action
>
O passo 2 foi chamado de beneficiário, ou seja a pessoa a quem se destina o
cupom.
68
O passo 3 foi referente a opções de pagamento e o passo 4 é referente a exibição de
uma caixa com termos de uso do site.
A página de informações de cobrança foi renomeada para beneficiário, nela
encontra-se muitas informações pessoais e de endereço porém não será preciso tanta
informação. O problema são os campos obrigatórios do cadastro de novo usuário. Pois a
validação dos campos são feitas client-side e server side, ou seja duas vezes (por questões
de segurança).
Então nesse ponto é possível ter duas opções básicas. Desligar as validações
básicas feitas no JavaScript ou PHP ou ocultar os input’s e deixar um value preenchido por
padrão para todos os cadastros. A segunda opção é a mais fácil e rápida de implementar,
porém menos elegante. Por isso foi usado a primeira opção.
O arquivo billing.phtml foi aberto e apagados os campos que não são necessários no
cadastro. Os campos julgados necessários foi tirado a opção de validação e removido o
valor required-entry do atributo class do input.
No código alguns campos que foram considerados desnecessários foram retirados
como: “Last name”, profissão, além de vários campos referente ao endereço, fax, etc.
No backend ainda é possível adicionar os campos CPF e data de nascimento como
mostra a FIGURA 49.
FIGURA 49 – Campos adicionais para clientes.
Nesse momento o sistema não fará mais a validação de client-side em JavaScript,
mais ao chegar no server-side, a validação em PHP entra em ação e interrompe o processo
com um alerta de erro. Então o usuário será direcionado para o arquivo Customer.php e
69
Abstract.php onde está localizado uma função validate () que faz a validação dos campos do
formulário novamente.
Dentro da função é encontrado diversas linhas com Zend_Validate e o nome dos
campos que estão sendo validados. Bastando apagar ou comentar as validações que
desejar retirar.
Neste caso foi apenas o campo Sobrenome, pois os campos Fax e Profissão não
eram obrigatórios.
QUADRO 16 – Campo sobrenome pode ser apagado ou comentado.
if (!Zend_Validate::is( trim($this->getLastname()) , 'NotEmpty')) { $errors[] = $customerHelper->__('The last name cannot be empty.'); }
Ainda o arquivo Abstract.php fica localizado a validação dos campos de endereço.
QUADRO 17 – Validação dos campos de endereço.
if (!Zend_Validate::is($this->getStreet(1), 'NotEmpty')) { $errors[] = $helper->__('Please enter the street.');}
if (!Zend_Validate::is($this->getCity(), 'NotEmpty')) { $errors[] = $helper->__('Please enter the city.'); }
$_havingOptionalZip = Mage::helper('directory')->getCountriesWithOptionalZip(); if (!in_array($this->getCountryId(), $_havingOptionalZip) && !Zend_Validate::is($this->getPostcode(), 'NotEmpty')) { $errors[] = $helper->__('Please enter the zip/postal code.'); }
if (!Zend_Validate::is($this->getCountryId(), 'NotEmpty')) { $errors[] = $helper->__('Please enter the country.'); }
if ($this->getCountryModel()->getRegionCollection()->getSize() && !Zend_Validate::is($this->getRegionId(), 'NotEmpty')) { $errors[] = $helper->__('Please enter the state/province.'); }
70
De acordo com SAM (2011), não é aconselhável alterar os arquivos core do sistema,
pois uma atualização de versão do Magento pode sobrepor seus arquivos. É mais viável
criar um arquivo na pasta local para fazer tais alterações.
2.2.7.10 Configurações de Pagamento (PagSeguro)
No projeto do site foi escolhida a opção de PagSeguro ou pagamento digital que
garantem segurança, evitam fraudes, possuem opções de pagamento e parcelamento.
O primeiro passo foi criar uma conta vendedor (FIGURA 50) no PagSeguro e em
seguida foram feitas as configurações necessárias para uma conta vendedor, a FIGURA 51
mostra como é uma conta vendedor.
FIGURA 50 – Criando conta vendedor.
71
FIGURA 51 – Modelo de uma conta vendedor.
Uma página de retorno é solicitada na configuração (FIGURA 52) além do número do
Token que é gerado dentro da página do PagSeguro (FIGURA 53).
FIGURA 52 – Ativando URL de retorno.
72
FIGURA 53 – Token de segurança gerado.
Logo foi baixado um plugin correspondente e compatível com a versão do Magento e
configurado o módulo com as informações de conta no Magento (FIGURA 54).
FIGURA 54 – Configurando PagSeguro no Magento
E por ultimo o “aceite de termos de condições”, onde foi colocada uma caixa texto
solicitando que o cliente marque, informando que entendeu e que aceita todas as condições
os termos de condições do uso do site e da promoção em vigor.
Para isso foi criado um termo direto no backend do site e colocado todas as
informações necessárias e logo o termo já está disponível do checkout da loja (FIGURA 55).
73
FIGURA 55 – Criando Termo de Condição.
Assim que o usuário aceitar as condições, o botão “inicializar pedido” que foi
renomeado para “efetuar pagamento“ vai estar disponível e o processo de venda estará
finalmente terminado.
Depois de efetuado o pagamento esses módulos costuma redirecionar o controle
para a loja. Geralmente para uma página de sucesso.
2.2.7.11 Configurações do E-mail marketing
De acordo com FAUST (2011) o envio regular de ofertas por E-mail é um dos
maiores triunfos do modelo de compra coletiva.
No projeto foi utilizado para enviar E-mail marketing uma ferramenta já disponível no
Magento, no qual foi necessário criar um modelo de E-mail, e em seguida bastando
selecionar a lista de cliente que pode estar organizada por cidade, categoria, etc.
A FIGURA 56 mostra um E-mail marketing sendo enviado.
74
FIGURA 56 – Fila de envio de E-mail marketing.
2.2.7.12 Configurações gerais pós venda
É correto afirmar que um projeto como esse não costuma ter um fim, pois sempre
terá alguma coisa para ser feita ou melhorada.
Então será preciso abordar alguns detalhes que compõem a estrutura de um e-
commerce desse porte.
Eventualmente depois da venda concluída pelo usuário, será preciso enviar E-mails
de transação assim como também será preciso customizar as páginas de conteúdo além de
desativar algumas funções nativas do Magento.
São exemplos de transações: Fechar um pedido, cadastrar um novo usuário,
confirmar um pagamento. Essas ações geram envio de E-mail, então podem ser
consideradas “E-mails de transação”. Esse modelo de E-mail pode ser formatado a partir de
um modelo padrão existente no backend como mostra a FIGURA 57.
FIGURA 57 – E-mail Transação Personalizado.
75
Páginas do tipo “perguntas e respostas, ”quem somos”, “política de segurança”, etc,
podem ser criadas e gerenciadas no backend (FIGURA 58).
FIGURA 58 – Links no rodapé do site.
Algumas URL’s do Magento são exibidas em inglês, como “checkout”, “cart”,
“acount”, etc. Essas URL’s podem ser alteradas para o nome de preferência como mostra a
FIGURA 59.
FIGURA 59 – Alterando URL Padrão.
76
Como o site tem mais de uma loja uma para representar cada cidade como Itatiba e
Morungaba é interessante separar os clientes por grupos de cidades. No backend é possível
criar um grupo para cada cidade e em seguida é possível editar a guia de opções ao criar
uma nova conta e selecionar o grupo padrão de cadastro para cada loja como mostrado na
FIGURA 60.
FIGURA 60 – Alterando Grupo de Clientes.
Quando o usuário visualiza as ofertas anteriores no frontend, é carregada uma lista
de produtos. Esse arquivo list.phtml precisa ser editado para tirar o botão “comprar” e a
opção de link para detalhes do produto também.
Para retirar eventuais colunas (esquerda/direita) nas telas de categorias, foi editado o
layout como mostra a FIGURA 61.
77
FIGURA 61 – Alterando layout de categorias.
Outra configuração interessante nessa situação foi desligar o módulo de busca para
economizar recursos do sistema e evitar possíveis problemas como por exemplo o Google
indexar a página de busca. Então o módulo CatalogSearch foi desligado (FIGURA 62).
FIGURA 62 – Desligando Módulos do Sistema.
78
Para gerar uma lista de clientes que compraram a oferta, para ser entregue ao
estabelecimento, é possível usar os relatórios de vendas do Magento (FIGURA 63).
FIGURA 63 – Relatório de Vendas no Período.
2.2.7.13 Backup do banco de dados
É de extrema importância a realização de backup dos dados conforme mostrado na
FIGURA 64. No Magento o backup pode ser feito facilmente, no qual o backup é gerado no
sistema administrador no Magento que fica armazenado no servidor no formato (gz-
compactado), e pode fazer o download a qualquer momento e descompactar o arquivo.sql
(SAM, 2009).
79
FIGURA 64 – Backup pode ser salvo em lugar seguro.
80
2.3 RESULTADOS
O resultado do projeto pode ser observado na FIGURA 65 no qual mostra a página
principal do website referente a oferta do dia e também na FIGURA 66 referente a ofertas
anteriores.
FIGURA 65 – Página inicial do projeto
81
FIGURA 66 – Página Ofertas Anteriores
82
2.4 CONCLUSÃO
Com a finalização deste estudo, foi possível concluir que a Web focada no comércio
virtual vem facilitando muito a vida das pessoas oferecendo mais comodidade e praticidade,
já que é possível fazer quase tudo pela internet.
A proposta do projeto foi disponibilizar essa facilidade as pessoas com uma nova
categoria de comércio eletrônico que é a compra coletiva, disponibilizando o site
www.loja.fcmdesign.com.br para testes onde é possível conhecer melhor o
funcionamento de um sistema de compra coletiva.
A utilização do framework em código aberto no projeto trouxe muitos resultados
positivos onde foi possível adaptar sem problemas o framework para uma solução
customizada funcional. A administração ficou muito prática devido a múltiplos websites
serem administrados em uma única interface.
Como projetos futuros o objetivo é disponibilizar o site de compra coletiva na Web
com ofertas válidas de anunciantes das cidades utilizadas no projeto.
83
REFERÊNCIAS BIBLIOGRÁFICAS
ARAYA, Maurício; CASTRO, Alessandra. Comércio eletrônico comemora lucros.
Disponível em http://mauricioaraya.wordpress.com/2008/06/07/comercio-eletronico-em-alta/
Acesso em: 07 dez. 2011.
BAPTISTELLA, Adriano. Abordando a arquitetura MVC. Disponível em
<http://artigos.netsaber.com.br/resumo_artigo_16922/artigo_sobre_
abordando_a_arquitetura_mvc,_e_design_patterns:_observer,_composite,_strategy.>
Acesso em: 20 jul. 2011.
BOGO, C. Kellen. A história da internet: Como tudo começou. Disponível em:
<http://www.kplus.com.br/materia.asp?co=118rv=Vivencia > Acesso em: 14 out. 2011.
BOOCH, Dr Dobb's Journal. Vantagens e desvantagens dos frameworks. Disponível em:
<http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/frame/porque.htm>
Acesso em: 14 jul 2011.
CAMPOS, Augusto. O que é software livre. Disponível em <http://br-linux.org/linux/faq-
softwarelivre>. Acesso em: 20 jul 2011.
FAUST Cledson.E-book. Guia Bolsa de ofertas: Como criar e gerenciar um site de
compras coletivas de sucesso. São Paulo: Bolsa de Ofertas: 2011. 66 p.
FELIPINI, Dailton. Compras Coletiva: Um guia para o comprador, o comerciante e o
empreendedor. Rio de Janeiro, SP: Ed. Brasport: 2011. 160 p.
GAMMA, Erich et al. Padrões de Projeto: Soluções reutilizáveis de software Orientado a
Objetos. Porto Alegre: Ed. Bookman, 2000. 364 p.
GAVIOLI, G. Compra coletiva. Disponível em: <http://ecommercenews.com.br/glossario/o-
que-e-compra-coletiva>. Acesso em 26 out 2011.
LASTRES, Helena; ALBAGLI, Sarita. Informação e globalização na era do
conhecimento. Rio de Janeiro: Ed. Campos 1999. 163 p.
84
LUPI, Iria. Histórico do comércio eletrônico. Disponível em:
<http://www.oficinadanet.com.br/artigo/1718/historico_do_comercio_eletronico> Acesso em:
27 maio 2011.
MCCOMBS Adam, BANH Robert. Magento: Guia definitivo. São Paulo: Ed. Novatec:
2010. 320 p.
NESI, M. Marcelino. Universidade Federal do Rio de Janeiro: Noções Básicas de SGML.
Disponível em: < http://www.gta.ufrj.br/grad/00_2/xml/sgml.htm>. Acesso em: 28 out 2011.
PEIXOTO, Rodney de Castro. O comércio eletrônico e os contratos. Rio de Janeiro: Ed.
Forense, 2001.165 p.
PIMENTEL, A. R. Modelos, Especificações, Modelos de Projeto. Disponível em:
<http://www.inf.ufpr.br/andrey/ci221/SOFTua11.pdf> Acesso em: 02 nov 2011.
ROSA, Everton. O que é o AJAX e como ele funciona. Disponível em:
< http://codigofonte.uol.com.br/artigo/javascript-dhtml/o-que-e-o-ajax-e-como-ele-funciona>.
Acesso em: 28 out. 2011.
SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: Sites controlados por
folhas de estilo em cascata. São Paulo: Ed. Novatec, 2008. 431 p.
SILVA Mauricio Samy. JavaScript: Guia do programador. : São Paulo: Ed. Novatec, 2010.
604 p.
Site oficial do PHP. Disponível em: < http://www.php.net/manual/en/introduction.php>.
Acesso em 26 out 2011.
SAM, Mario. Compra Coletiva Configurações.Disponível em:
< http://escolamagento.com/compra-coletiva-1/>. Acesso em: 20 set. 2011.
SAM, Mario. Criando Backup do Banco de Dados. Disponível em:
< http://escolamagento.com/backup-banco/>. Acesso em: 09 nov. 2011.
SITE oficial do MySQL: Why MySQL. Disponível em: < http://www.mysql.com/why-msql/>
Acesso em: 31 out. 2011.
85
SILBERSCHATZ, Abraham, KORTH, Henry F., SUDARSHAN S. Sistema de bancos de
dados. 3. Ed. São Paulo: Ed. Makron, 2006. 781 p.
SITE oficial osCommerce: About osCommerce. Disponível em:
<http://www.oscommerce.com/about/about> Acesso em: 14 out. 2011.
SITE oficial do Magento: Company. Disponível em:
< http://www.magentocommerce.com/company/> Acesso em: 02 nov. 2011.
VALLE, Alberto. Tendências do Sites de Compras Coletivas. Disponível em:
<http://www.blogdoecommerce.com.br/tendencias-do-sites-de-compras-coletivas/>
Acesso em:15 jun. 2011.
