_______________________________________________________________________________

FACULDADE DE TECNOLOGIA DE AMERICANA

Curso Tecnologia em Análise e Desenvolvimento de Sistemas

Leonardo Machado Moscardo

DESENVOLVIMENTO DE UMA LOJA VIRTUAL

Americana, SP

2016
________________________________________________________________________________

FACULDADE DE TECNOLOGIA DE AMERICANA

Curso Tecnologia em Análise e Desenvolvimento de Sistemas

Leonardo Machado Moscardo

DESENVOLVIMENTO DE UMA LOJA VIRTUAL

Trabalho de Conclusão de Curso desenvolvido

em cumprimento à exigência curricular do
Curso Tecnologia em Análise e
Desenvolvimento de Sistemas, sob a
orientação do (a) Prof. Me. Anderson Luiz
Barbosa.

Área de concentração: Desenvolvimento de

sistemas.

Americana, SP

2016
FICHA CATALOGRÁFICA – Biblioteca Fatec Americana - CEETEPS
Dados Internacionais de Catalogação-na-fonte
Moscardo, Leonardo Machado
M866d Desenvolvimento de uma loja virtual. /
Leonardo Machado Moscardo. – Americana: 2016.
62f.

Monografia (Graduação em Tecnologia em

Análise e Desenvolvimento de Sistemas). - -
Faculdade de Tecnologia de Americana – Centro
Estadual de Educação Tecnológica Paula Souza.
Orientador: Prof. Me. Anderson Luiz
Barbosa

1.Desenvolvimento de software I. Barbosa,

Anderson Luiz II. Centro Estadual de Educação
Tecnológica Paula Souza – Faculdade de
Tecnologia de Americana.

CDU: 681.3.05
 AGRADECIMENTOS
Em primeiro lugar gostaria de agradecer a minha família, pelo apoio durante a
realização da faculdade, em especial a minha mãe e meu pai, por me
proporcionarem a oportunidade de frequentar uma faculdade. Gostaria de agradecer
em especial a minha avó, pelo carinho, amor e ajuda nas horas difíceis.

Em segundo lugar gostaria de agradecer meus amigos e colegas de trabalho

pelas ideias, dicas e apoio durante o desenvolvimento do trabalho.

Gostaria de agradecer em especial o professor Anderson Barbosa, pela

orientação e conselhos para a realização desse trabalho.
 DEDICATÓRIA

Aos meus pais pelo apoio constante e incondicional.

Aos meus amigos de faculdade pelas histórias que foram

criadas ao longo do tempo.
 RESUMO

O presente texto apresenta como proposta o desenvolvimento de uma loja virtual,

através da elaboração do site, será explicado a definição do que é um comércio
eletrônico e como é feito a produção de uma loja virtual. O objetivo é mostrar a
importância do e-commerce atualmente, quais seus pontos positivos para uma
empresa e como ele pode aumentar a receita da mesma, ao final apresentar a
criação de uma loja virtual, utilizando modernas tecnologias de desenvolvimento e
destacando os cuidados que devem ser tomados ao realizar esse tipo de projeto. As
metodologias usadas para a elaboração desse trabalho foram pesquisas
bibliográficas por meio de livros, sites, artigos científicos, monografias e experiência
de campo. O texto foi dividido em duas partes para o melhor entendimento,
explicando primeiramente o que é um comércio eletrônico e as vantagens que ele
pode trazer para as empresas nos dias atuais e posteriormente o desenvolvimento
de uma loja virtual. Fechando o trabalho as conclusões retiradas durante o
andamento do mesmo.

Palavras Chave: loja virtual; e-commerce; desenvolvimento web.

 ABSTRACT

This text presents a proposal to develop a virtual store, through the development of
the site, the definition of what is an e-commerce and how production is done in a
virtual store will be explained. The goal is to show the importance of the current e-
commerce, what strengths for a company and how it can increase revenue the same
at the end present the creation of a virtual store, using modern development
technologies and highlighting the care that must be taken when performing this type
of project. The methodologies used for the preparation of this work were through
literature searches books, websites, scientific articles, monographs and field
experience. The text is divided into two parts for better understanding, first explaining
what is an e-commerce and the benefits it can bring to businesses these days and
later the development of a virtual store. Closing the work, the conclusions drawn
during the course of it.

Keywords: virtual store, e-commerce, development.

 SUMÁRIO

1. INTRODUÇÃO ...............................................................................................13

2. E-COMMERCE ...............................................................................................16

2.2. Benefícios do e-commerce ............................................................................. 18

2.2.1. Benefícios diretamente mensuráveis quantitativos: ------------------------- 18

2.2.2. Benefícios indiretos qualitativos: -------------------------------------------------- 19

2.3. Características do E-commerce ...................................................................... 22

3. ENGENHARIA DE SOFTWARE ....................................................................24

3.1. Modelo cascata ............................................................................................... 25

3.2. Modelo evolucionário ...................................................................................... 26

3.3. Modelo incremental......................................................................................... 28

3.4. Ferramentas para documentação do projeto .................................................. 30

3.4.1. UML ------------------------------------------------------------------------------------------ 30

3.4.2. Casos de uso ----------------------------------------------------------------------------- 31

3.4.3. Diagramas de sequência ------------------------------------------------------------- 31

3.4.4. Diagrama de atividade ----------------------------------------------------------------- 32

3.4.5. Diagrama de classe -------------------------------------------------------------------- 32

4. DESENVOLVIMENTO PARA WEB ...............................................................33

4.1. World Wide Web ............................................................................................. 33

4.2. Diferenças básicas no desenvolvimento web ................................................. 35

5. FERRAMENTAS ............................................................................................37

5.1. Cloud9 ............................................................................................................ 37

5.3. HTML .............................................................................................................. 40

5.4. CSS ................................................................................................................ 40

5.5. JavaScript ....................................................................................................... 41

5.6. Programação MVC ......................................................................................... 42

5.7. Java ................................................................................................................ 43

6. PLANEJAMENTO E DESENVOLVIMENTO DO SITE...................................45

6.1. Estudo de caso ............................................................................................... 45

6.2. Levantamento de requisitos ............................................................................ 46

6.2.1. Requisitos do projeto ------------------------------------------------------------------ 46

6.3. Primeiro incremento ........................................................................................ 47

6.3.1. Documentação --------------------------------------------------------------------------- 47

6.4. Resultados do primeiro incremento ................................................................ 54

6.5. Segundo incremento ....................................................................................... 55

6.6. Resultados do segundo incremento................................................................ 55

6.7. Terceiro incremento ........................................................................................ 57

6.8. Resultados do terceiro incremento ................................................................. 57

6.9. Possíveis melhorias ........................................................................................ 59

7. CONSIDERAÇÕES FINAIS ...........................................................................60

8. REFERÊNCIAS BIBLIOGRÁFICAS ..............................................................61

 LISTA DE FIGURAS E TABELAS

Figura 1 - Modelo de comércio eletrônico (Perspectiva integrada) ........................... 17

Figura 2 - Classes de transações. ............................................................................ 22

Figura 3 - Ciclo de vida clássico da engenharia de software. ................................... 26

Figura 4 - Desenvolvimento evolucionário ................................................................ 27

Figura 5 - Diagrama do Ciclo de Vida Iterativo e Incremental. ................................. 29

Figura 6 - Entrega incremental ................................................................................. 30

Figura 7 - Ambiente de Desenvolvimento Cloud9 .................................................... 39

Figura 8 - Exemplo de codificação em HTML ........................................................... 40

Figura 9 - Exemplo de codificação em CSS ............................................................. 40

Figura 10 - Exemplo de codificação em JavaScript ................................................. 42

Figura 11 - Diagrama MVC ....................................................................................... 43

Figura 12 - Exemplo de codificação em Java ........................................................... 44

Figura 13 - Diagrama de casos de usos da loja virtual ............................................. 48

Figura 14 - Diagrama de sequência de compra ........................................................ 49

Figura 15 - Diagrama de classe ................................................................................ 50

Figura 16 - Diagrama de atividade, fazer autenticação site ...................................... 51

Figura 17 - Diagrama entidade relacionamento ........................................................ 52

Figura 18 - Diagrama de atividade, alterar senha ..................................................... 53

Figura 19 - Diagrama de atividade, recuperar senha ............................................... 53

Figura 20 - Página inicial .......................................................................................... 54

Figura 21 - Página de autenticação .......................................................................... 55

Figura 22 - Página de produtos ................................................................................ 56

Figura 23 - Página do carrinho ................................................................................. 56

Figura 24 - Página de pagamento ............................................................................ 58

Figura 25 - Página de pedidos.................................................................................. 59

 LISTA DE ABREVIATURAS E SIGLAS

BD Banco de Dados

CE Comércio eletrônico

CGI Common Gateway Interface

CSS Cascading Style Sheets

ERP Enterprise Resource Planning

ES Engenharia de Software

HTML HyperText Markup Language

HTTP Hypertext Transfer Protocol

IDE Integrated Development Environment

IP Internet Protocol

SGBD Sistema Gerenciador de Banco de Dados

TCP Transmission Control Protocol

TI Tecnologia da informação

UML Unified Modeling Language

URI Uniform Resource Identifiers

URL Uniform Resource Locator

WWW World Wide Web

 13

1. INTRODUÇÃO
Atualmente as empresas estão cada vez mais dependentes da tecnologia
para o auxílio na gestão, produção empresarial e divulgação. Com o auxílio de
softwares, sites e outros tipos de sistemas, as corporações estão se tornando cada
vez mais produtivas e competitivas no mercado de trabalho. As companhias
precisam se manterem atualizadas para não ficarem atrás da concorrência.

O mercado moderno exige das organizações preços competitivos, que

significa custos baixos e sob controle, além da alta qualidade do produto ou serviço.
Essas exigências tornam a Tecnologia da Informação (TI) parceira estratégica para
as empresas que desejam situar-se entre as vencedoras em seus respectivos nichos
de mercado (FOINA, 2001).

O ambiente empresarial tem vivenciado, tanto em nível mundial como

nacional, pressões competitivas, pressão para reduzir estoques e custos de
produção, redução do ciclo de venda e entrega dos produtos e a necessidade de um
maior relacionamento com o consumidor. Como forma de enfrentar essas pressões,
as empresas estão buscando no e-commerce uma alternativa tanto de comunicação
como de comercialização com o cliente (Albertin, 2010, p. 1).

Na atualidade, algumas das características do novo ambiente empresarial,

tais como globalização, integração interna e externa das organizações, têm
confirmado as tendências e necessidade da criação e utilização do mercado de
comércio eletrônico, que já é considerado como uma realidade (Albertin, 2010, p. 1).

Tendo em vista essas mudanças no mercado, exigindo que as empresas

aumentem seu desempenho, a aquisição ou desenvolvimento de sistemas
específicos ou gerais para o empreendimento, torna-se de vital importância aos
empreendedores que visam o crescimento do negócio. Uma das soluções proposta
a resolução desse problema é a criação de uma loja virtual ou e-commerce, sendo
assim o objetivo geral deste trabalho demonstrar uma loja virtual de vendas de
jogos.

O e-commerce, através da utilização da infraestrutura da internet que é

predominantemente pública de fácil e livre acesso, possibilita a troca de informações
entre empresas e entre empresas e consumidores, bem como a compra de produtos
e a prestação de serviços.
 14

A justificativa para o desenvolvimento desse trabalho é demonstrar como uma

loja virtual pode melhorar o potencial de uma empresa, devido ao mercado atual
exigir que as empresas aumentem seu desempenho, mudem suas estratégias e
busquem novas formas de estar à frente de outras empresas. Torna-se de vital
importância para os empreendedores que visam o crescimento do negócio a busca
de novas tecnologias no mercado. Uma das soluções que estão disponíveis
atualmente para resolução desses problemas é o desenvolvimento de uma loja
virtual.

O objetivo desse trabalho é descrever como o comércio virtual pode aumentar

a competitividade de uma empresa e sua receita e demonstrar o desenvolvimento
prático de uma loja virtual, tornando o negócio mais competitivo no mercado.

Com objetivos específicos, visando cumprir o objetivo geral desse trabalho,

são:

 Apresentar uma síntese bibliográfica sobre o que é comércio eletrônico;

 Explicar como o comércio eletrônico pode aumentar a competitividade e
a receita da empresa;
 Levantamento de requisitos para o desenvolvimento de uma loja virtual;
 Descrever as ferramentas utilizadas para o desenvolvimento de um e-
commerce;
 Descrever os passos do desenvolvimento de uma loja virtual bem como
os métodos de desenvolvimento;
 Conclusões.

Tratando-se de um trabalho em que há desenvolvimento prático de um

sistema, foi necessário a divisão da metodologia em duas partes, na primeira parte
engloba o método cientifico, que foi realizado através de pesquisas bibliográficas
através de livros, sites, artigos científicos, monografias e experiência de campo. A
coleta de dados e informações se faz através de entrevistas, observações e dados
coletados pelo autor, gerados pela sua experiência de campo.

Na segunda parte, está composta pelo desenvolvimento do sistema, que

necessita de um modelo de processo para ter o planejamento do sistema, desde os
levantamentos de requisitos até a implantação, neste trabalho foi definido o uso do
desenvolvimento incremental que de acordo com Sommerville (2007, p. 47-48), o
 15

modelo incremental é uma abordagem intermediaria que combina as vantagens do

modelo cascata em um processo de desenvolvimento incremental no qual o cliente
identifica, em linhas gerais, os serviços a serem fornecidos pelo sistema,
identificando quais serviços são de maior importância e quais são menos
importantes, assim definindo um número de incrementos.

Assim, torna-se de vital importância o levantamento de dados a respeito do e-

commerce e o mercado em que a loja será desenvolvida, com a finalidade de
evidenciar e justificar o objetivo do trabalho.
 16

2. E-COMMERCE

De acordo com Albertin (2010, p. 3) o comércio eletrônico (CE) é a realização

de toda a cadeia dos processos de negócio num ambiente eletrônico, por meio da
aplicação intensa das tecnologias de informação, que atendam aos objetivos do
negócio. Podendo os processos serem realizados de forma completa ou parcial.
Ainda segundo Albertin (2010, p.3) o CE pode ser definido como a compra e a venda
de informações, produtos ou serviços por meio da rede de computadores.

Cameron (1997) explica que CE inclui qualquer negócio transacionado

eletronicamente, em que essas transações ocorram entre dois parceiros de negócio
ou entre um negócio e seus clientes.

Kalakota e Whinston (1997) definiram e-commerce como a compra e a venda

de informações, produtos e serviços através de redes de computadores. No entanto,
o e-commerce envolve mais do que comprar e vender. Ele inclui também todos os
tipos de esforço pré-venda e pós-venda.

O comércio eletrônico possui diferentes definições para cada segmento que

possa utilizá-lo, a definição que melhor se destina ao propósito desse trabalho é a
definição apresentada por Kalakota e Whinston (1997) de uma perspectiva on-line, o
CE provê a capacidade de comprar e vender produtos, informações ou serviços na
Internet e em outros serviços on-line.

De forma simples e direta o comércio eletrônico pode ser definido como a

venda ou compra de serviços, produtos ou informações por meio de uma rede online
de computadores. A figura 1 apresenta um modelo básico do CE, mostra todas as
fases de uma compra eletrônica. Identificando os papeis representados por
comprador e vendedor, apontando as trocas realizadas entre eles. Comprador e
vendedor realizam diversas trocas de informações durante o processo, no primeiro
momento comprador e vendedor trocam informações, referente ao produto ou ao
serviço, após as trocas de informações é realizado a troca de dinheiro por parte do
cliente e a mercadoria ou serviço por parte do vendedor.
 17

Figura 1 – Modelo de comércio eletrônico (Perspectiva integrada).

Fonte: Albertin, 2010, p. 4.

Assencio (2013, apud Ibope Media), relata que, no segundo trimestre de

2013, mais de 105 milhões de brasileiros possuíam acesso à internet e esse número
apenas aumenta com o passar do tempo, devido aos diversos meios pelo qual as
pessoas podem ter acesso a internet.

De acordo com o The World Bank (2013), a população brasileira chega a

200,4 milhões de pessoas, ou seja, mais da metade das pessoas do Brasil possuem
acesso à internet, tornando ela a maior loja existente no mundo moderno, levando
em consideração apenas o Brasil como meio de medida, porém a internet possui
alcance global fazendo dela uma ferramenta poderosa para vendedores e
fornecedores de serviços.

Entre o período de 01/01/2012 a 30/06/2012 foram faturados R$ 10,2 bilhões

de reais no país afirma o E-bit (2012), o que expressa um aumento de 21% perante
ao mesmo período do ano anterior que de acordo com o E-bit (2012) foram
contabilizados R$ 8,4 bilhões, representando um aumento significativo e
demonstrando mais uma vez a força com que o CE vem crescendo no Brasil.

Conforme o E-bit (2015), empresa especializada em informações do comércio

eletrônico, o setor de vendas online em 2014 movimentou cerca de R$ 35,8 bilhões,
crescendo 24% em relação a 2013. Tendo ao todo 51,5 milhões de consumidores
 18

nesses mesmo ano. Para Pedro Guasiti (2015), diretor executivo da E-bit, o mercado
vem evoluindo ano após ano, devido a quantidade de ferramentas e opções
disponibilizadas aos consumidores.

Ao se avaliar os dados fornecidos pelo E-bit e pelo Ibope Media em relação

ao Brasil, pode-se observar, por meio de dados quantitativos, que as vendas online
possuem uma forte fatia de faturamento do mercado e um grande público de
clientes, o que justifica a adoção de um desenvolvimento de uma loja virtual para a
venda de produtos via internet.

2.2. Benefícios do e-commerce

Nesta seção será apresentado os benefícios do e-commerce que foram

divididos em duas partes, os benefícios diretamente mensuráveis quantitativos, os
quais são possíveis de se medirem com dados resgatados diretamente da própria
loja virtual e os benefícios indiretos qualitativos, os quais não podem ser medidos
com tanta precisão, porém são pontos importantes para poder se medir a qualidade
do e-commerce. Posteriormente será apresentado os benefícios na perspectiva do
negócio e na perspectiva do cliente.

2.2.1. Benefícios diretamente mensuráveis quantitativos:

 Promoção de produtos;

A promoção de produtos na rede é facilitada devido a apenas ser necessário

alterações virtuais, na internet, sem a necessidade de criação de material físico
para a realização dessa promoção, podendo ser personalizada de várias formas
diferentes e de acordo como a empresa gerencia seu sistema de venda, caso ele
seja gerenciado pelas próprias pessoas da empresa, a alteração não irá gerar
custos.

 Novo canal de vendas;

Com a loja virtual, as empresas passam a ter um novo canal de vendas e

comunicação com seus clientes. Podendo utilizar apenas de vendas virtuais
como fazer uma combinação entre o meio físico e o digital.
 19

 Economia direta;

Com a utilização do site para vendas pode ser eliminado a necessidade de um

terceiro para intermediar a negociação, as informações sobre o produto e as
formas de pagamentos são informadas no site durante a realização da compra.

 Inovação de produtos;

Assim como na promoção de produtos, a inovação dos mesmos é facilitada

durante a utilização do e-commerce, o lançamento dos produtos pode ser feito de
forma simples e direta, podendo, para fins de análise, ser feito monitoramentos
das vendas de novos produtos ou até mesmo solicitações de feedbacks aos
clientes em relação aos novos produtos. Dessa forma a empresa poderá
adequar-se às necessidades dos clientes podendo de uma próxima vez atender
melhor as expectativas dos consumidores.

 Tempo de comercialização;

A natureza do e-commerce é instantânea, assim os produtos a serem

comercializados podem ser inseridos ou retirados a qualquer momento, como as
promoções e inovações também podem ser feitas rapidamente, a flexibilidade e
agilidade da operação de compra, venda e distribuição do comércio virtual
identicamente se encaixa na natureza rápida de uma loja virtual.

 Prestação de serviços;

Com o e-commerce a empresa poderá prestar serviço ao consumidor 24 horas

por dia 7 dias por semana, contanto que a loja esteja online o consumidor pode
comprar a qualquer hora do dia ou da noite, inclusive a companhia pode oferecer
serviços de suporte ao cliente online. Guiando o cliente caso haja necessidade,
problemas ou dúvidas na hora da realização das compras online.

2.2.2. Benefícios indiretos qualitativos:

 Novas oportunidades de negócio;

O comércio eletrônico abre novas oportunidades de negócio para as empresas

que resolvem implantá-lo em sua instituição. Trabalhando diretamente com o
consumidor, eliminando o intermediário de compra e de pagamento, porém
trazendo para o consumidor o suporte ao cliente online, através do próprio site,
via chat, por telefone através de uma central de atendimento ou por e-mail.
 20

 Relacionamento com clientes;

A relação com o cliente no e-commerce deve ser tratada com muito cuidado,
devido à grande quantidade de concorrência existente no mercado, deve-se
evitar ao máximo falhas e erros no sistema, sempre atendendo o consumidor
rápido e com clareza e simplicidade nas informações, levando em consideração
que são compradores de diversas faixas etárias e conhecimentos diferentes.
Buscando sempre a aprendizagem de suas necessidades e desejos para torna a
experiência de compras online cada vez mais agradável, fazendo com que o
comprador retorne a sua loja.

 Divulgação da marca da empresa e de novos produtos;

A internet atualmente é o principal meio de divulgação devido ao seu grande

número de acessos e usuários, sendo assim as empresas vem construindo suas
marcas dentro do ambiente virtual. A loja virtual é uma via de duas mãos,
podendo servir tanto para a venda como para a divulgação de sua empresa,
tornando a estratégia de venda ainda mais efetiva, devido a divulgação do
trabalho da instituição ao cliente.

 Aprendizagem organizacional;

A introdução de uma loja virtual a empresa fará com que a organização aprenda
a trabalhar com essa tecnologia, sendo necessário adquirir novas estratégias de
negócio para o desenvolvimento de todos os processos envolvidos na venda,
tanto para a obtenção de informações do consumidor como para oferecer novos
produtos e serviços.

Segundo Albertin (2010, p.11-12) as aplicações de CE podem ser

categorizadas em três tipos de transações:

 Negócio-a-negócio, CE no ambiente entre organizações;

 Negócio-a-consumidor, CE no ambiente entre organizações e consumidores,
sendo o mais comum entre os três; e
 Intraorganizacional, no ambiente interno das organizações.
 21

Cada um com suas respectiva vantagens e benefícios:

Na perspectiva negócio-a-negócio, o CE beneficia as seguintes aplicações de

negócio:

 Gerenciamento de fornecedor;
 Gerenciamento de estoque;
 Gerenciamento de distribuição;
 Gerenciamento de canal;
 Gerenciamento de pagamento;

Na perspectiva negócio-a-consumidor as transações eletronicamente são

facilitadas, os clientes aprendem sobre os produtos por meio de publicações
eletrônicas e também têm informações sobre as entregas das mercadorias por meio
da rede.

Na perspectiva de consumidor, o CE facilita as seguintes características:

 Integração social;
 Gerenciamento de finança pessoal; e
 Informações e compra de produtos.

Na perspectiva intraorganizacionais é ajudar uma empresa manter

relacionamentos que são críticos para a entrega de valor ao cliente. Visando as
várias integrações e funções numa organização, nessa perspectiva
Intraorganizacional, o CE facilita as seguintes aplicações de negócio:

 Comunicação de grupo de trabalho;

 Publicação eletrônica;
 Produtividade da força de vendas;

As classes de transações podem variar conforme seus participantes, porém

as principais particularidades estão nas transações entre negócio, consumidor e
governo, conforme apresentado na figura 2.
 22

Figura 2 – Classes de transações.

Fonte: Albertin, 2010, p.13.

2.3. Características do E-commerce

As informações sobre o produto, tanto técnicas como gerais, disponíveis

claramente durante a escolha do item, a comodidade em poder adquiri-los a
qualquer hora do dia ou da noite, sete dias por semana e de qualquer lugar do
mundo, sendo somente necessário ter um dispositivo com acesso à internet, os
preços reduzidos devido ao baixo custo de operação gerado pela loja virtual, a
grande gama de produtos encontrados na rede, a diversificação nas formas de
pagamentos, são as principais características do comércio eletrônico.

Um ponto a se levantar é que as empresas atualmente já fazem um grande

investimento na área de TI para a melhora de seus processos internos, muitas vezes
essas empresas não só possuem uma área de tecnologia para produtos físicos,
como servidores, computadores entre outros equipamentos, mas para o
desenvolvimento ou manutenção de softwares, facilitando assim a implantação de
um comércio eletrônico se desejado.
 23

Dentre essas características existem três pilares bases para a caracterização

de um comércio eletrônico, diferentemente de um comércio tradicional, são eles:

 Comunicação;
A comunicação entre loja e cliente difere do comércio tradicional devido a
inexistência de um vendedor, conseguindo assim o cliente efetuar uma
compra sem a necessidade de entrar em contato com nenhuma pessoa, caso
não possua nenhuma dúvida ou ocorra algum problema. Caso ocorra a
necessidade de comunicação entre o cliente e organização a informação
necessita ser simples e de fácil entendimento.
 Dados;
Os dados provêm um papel muito importante no CE, é preciso manter as
informações armazenadas dos diversos tipos de clientes que realizam
acessos a diversos comércios eletrônicos, para posteriormente poder realizar
estudos em cima desses dados, é através desses dados que é possível
montar um ou diversos perfis de clientes que acessam as lojas virtuais,
podendo assim realizar medidas estratégicas de campanhas de marketing,
promoções, atraindo o consumidor cada vez mais para a loja.
 Segurança;

A segurança é uma das características mais importantes para o comércio

eletrônico, é sem dúvida um fator chave, o qual o cliente vai levar em
consideração se vai ou não realizar a compra na loja virtual. Com o passar do
tempo as formas de se proteger contra os diversos tipos de ataques
aumentaram consideravelmente, porém ainda existem diversas medidas de
segurança que devem ser tomadas antes de realizar uma compra em um CE.
O próprio consumidor possui ferramentas para averiguar se determinada loja
virtual é segura ou não. Por ser um comércio a longa distância, o cliente
precisa ter garantias de que os seus dados não serão roubados ou usados
futuramente parar outros fins por terceiros.
 24

3. ENGENHARIA DE SOFTWARE

Como o trabalho apresentado é focado no desenvolvimento de um sistema, é

indispensável o uso da engenharia de software a fim de sustentar o desenvolvimento
do software de vendas online. Segundo Sommerville (2007, p.4), engenharia de
software é uma disciplina relacionada com todos os aspectos da produção de um
software, desde os estágios iniciais de especificação do sistema até sua
manutenção, depois que este entrar em operação.

É necessário compreender também o que é um software e porque é

necessário o uso da engenharia de software para o desenvolvimento dos mesmos.
Sommerville (2007, p.4) aponta que:

Software não é apenas o programa, mas também todos os dados de

documentação e configuração associados, necessários para que o
programa opere corretamente. Um sistema de software consiste,
geralmente, de um conjunto de programas separados.

Os softwares estão presentes em praticamente todas as empresas

atualmente, facilitando de diversas formas as tarefas que antes eram feitas
manualmente. A procura por eles tem aumentada cada vez mais e o
desenvolvimento também, porém esse desenvolvimento muitas vezes não é de
qualidade devido a não utilização ou pouca utilização da Engenharia de Software
(ES). Para se ter um produto de qualidade, seguro e confiável é preciso seguir uma
série de regras e procedimentos de desenvolvimento, o uso da ES se torna
obrigatório para desenvolver uma aplicação.

De acordo com Pressman (2011), o software abrange programas que

executam em computadores de qualquer tamanho e arquitetura. Contudo, o software
hoje em dia é parte fundamental para a obtenção de informação, produto que está
cada vez mais presente no mundo. Ainda segundo Pressman, os softwares estão
categorizados em diversos tipos, sendo um desses o software de web ou software
para web, que são aplicativos ou aplicações desenvolvidas especificamente ao
acesso via internet.

A ES existe para guiar e demonstrar os melhores métodos para o

desenvolvimento de um programa, afim de garantir que esse software atenda todos
os requisitos do cliente no final.
 25

Antes de se mencionar o modelo de desenvolvimento de sistemas utilizado

para a elaboração do estudo de caso desse trabalho, será apresentado dois outros
modelos cujo o modelo incremental combina as vantagens de ambos.

3.1. Modelo cascata

Conhecido como o ciclo de vida clássico da engenharia de software, sendo o

primeiro modelo de processo de desenvolvimento de software é o modelo mais
clássico e linear existente na engenharia de software. Possuindo cinco estágios de
desenvolvimento apresentados na figura 3.

Segundo Rogers S. Pressman (2011), o modelo cascata nasceu de uma visão

industrial de construção, ou seja, foi baseado em uma ordem sequencial e de cima
para baixo de suas atividades.

De acordo com a definição da característica de um software de Pressman

(2011) “... devido ao fato do software ser um elemento lógico e não físico, não se
pode trata-lo como se fosse projeto de manufatura, como um produto palpável, pois
a criação dele é puramente virtual ...”

Então pode-se constatar que o modelo cascata não nasceu com a melhor
visão para o desenvolvimento de programas, devido a sua natureza industrial.

A figura 3 apresenta os cincos estágios do modelo de desenvolvimento

cascata, começando com a definição básica dos requisitos definidos pelo cliente,
passando para a elaboração do projeto do sistema, após a elaboração é efetuada a
implementação e teste de acordo com o andamento do sistema, a integração e teste
do sistema como um todo compõem a faze final do desenvolvimento da aplicação,
ao final é ofericido a operação de manutenção do programa.
 26

Figura 3 – Ciclo de vida clássico da engenharia de software.

Fonte: Sommerville, 2007, p. 44.

Segundo Sommerville (2007, p.7), o modelo cascata é definido da seguinte

forma:

O modelo em cascata: considera as atividades apresentadas anteriormente

e as representa como fase separadas de processo, como especificação de
requisitos, projeto de software, implementação, teste e assim por diante.
Depois que cada estágio é concluído, ele é aprovado e o desenvolvimento
prossegue para o estágio seguinte.

O modelo em cascata apresenta a característica de forte documentação, o

que traz vantagens e desvantagens de acordo com o tipo de projeto que será
elaborado e grande participação do cliente. Esse modelo apresenta alguns
problemas, como, após definido os requisitos não é possível a mudança dos
mesmos, pois existe uma ordem a seguir. Devido a maior complexidade dos
sistemas na atualidade, o modelo de desenvolvimento em cascata vem caindo em
desuso.

3.2. Modelo evolucionário

O modelo evolucionário de desenvolvimento de software, como o próprio

nome já diz, baseia-se na produção de diversas versões de um sistema
 27

incrementando modificações no mesmo a cada nova versão, fazendo assim uma

evolução a cada novo incremento.

De acordo com Sommerville (2007, p.45), podemos descrever o modelo

evolucionário da seguinte forma:

O desenvolvimento evolucionário baseia-se na ideia de

desenvolvimento de uma implementação inicial, expondo o resultado aos
comentários do usuário e refinando esse resultado por meio de várias
versões até que seja desenvolvido um sistema adequado. As atividades de
especificação, desenvolvimento e validação são intercaladas, em vez de
serem separadas, com feedback rápido que permeia as atividades.

O modelo evolucionário inicia-se com uma descrição base dos requisitos do

sistema (figura 4), após a descrição geral começa a serem feitas especificações
mais detalhadas, gerando assim um ciclo. Após uma versão inicial, são
desenvolvidas versões intermediarias de acordo com a quantidade de especificação
até que se alcance a versão final.

Figura 4 – Desenvolvimento evolucionário.

Fonte: Sommerville, 2007, p. 46.

Assim como no modelo cascata o modelo evolucionário depende muito da

participação do cliente, existindo duas formas de extrair requisitos do cliente. Sendo
a primeira o método exploratório, que consiste em explorar os requisitos e focar
naqueles que estão bem compreendidos tanto pelos desenvolvedores quanto pelo
cliente e o outro método conhecido como prototipação throwaway (descartável),
sendo o foco explorar os requisitos mal-entendidos na busca de resolver as
incertezas que surgem durante o desenvolvimento do software.
 28

É um modelo mais eficaz que o cascata, possui uma grande aceitação do

cliente, pois todo desenvolvimento é validado com o mesmo e as alterações
solicitada podem ser incluídas em versões mais novas, modelo de desenvolvimento
adequado para sistemas de médio porte.

3.3. Modelo incremental

Esse capitulo tem como objetivo demonstrar o método de desenvolvimento do

sistema de e-commerce de jogos, relatando quais foram as escolhas feitas, perante
a grande quantidade de metodologias e formas de desenvolvimento existentes.

Sommerville (2007, p. 47-48) descreve o processo incremental:

Em um processo de desenvolvimento incremental, o cliente identifica, em

linhas gerais, os serviços a serem fornecidos pelo sistema. Eles identificam
quais serviços são mais importantes e quais são menos importantes. Assim,
um número de incrementos de entrega é definido, com cada incremento
fornecendo um subconjunto das funcionalidades do sistema.

Pressman (2011, p. 62) exemplifica o uso do processo incremental como um

software de processamento de texto, de forma que o primeiro incremento poderia
liberar funções básicas de gerenciamento de arquivos, edição e produção de
documentos; no segundo incremento, pode-se ter maior sofisticação de edição e
produção de documentos; no terceiro incremento, há a opção de desenvolver a
revisão ortográfica e gramatical no texto; e, por fim, no quarto incremento, são
disponibilizados recursos avançados de formatação. Dessa forma, o cliente terá
sempre um produto utilizável, atendendo suas funções mais importantes antes do
desenvolvimento completo do produto.

De acordo com Sommerville (2007, p. 48) o processo incremental apresenta

várias vantagens, como o benefício prévio do cliente poder utilizar o sistema, antes
de estar completo, pela facilidade de obter informações, requisitos, para os
incrementos seguintes, minimização de falhas gerais, devido a constante fase de
teste após cada incremento e o cliente validando as funções novas que serão
incrementadas ao sistema e prioridade dos serviços mais importantes.

Além dessas vantagens apresentadas anteriormente, Sommerville (2007,

p.48) destaca:
 29

1. Os clientes não precisam esperar até a entrega do sistema inteiro

para beneficiarem dele. O primeiro incremento satisfaz os requisitos
mais críticos e, dessa forma, é possível usar o software
imediatamente.
2. Os clientes podem usar os incrementos iniciais como protótipos e
ganhar experiência, obtendo informações sobre os requisitos dos
incrementos posteriores do sistema.
3. Existe um risco menor de falha geral do projeto. Embora possam
ser encontrados problemas em alguns incrementos, é provável que
alguns sejam entregues com sucesso aos clientes.
4. Como os serviços de prioridade mais alta são entregues primeiro,
e os incrementos posteriores são integrados a eles, é inevitável que
os serviços mais importantes de sistema recebam mais testes. Isso
significa que os clientes têm menor probabilidade de encontrar falhas
de software nas partes mais importantes do sistema.

O modelo incremental é um processo cíclico, com várias iterações, a cada

nova repetição os procedimentos de levantamento e análise de requisitos, projeto,
implementação, testes e implantação se repetem, assim como mostra na figura 5.

A figura 6 apresenta uma entrega incremental especifica, no qual todos os

passos apresentados devem ser seguidos para a realização de um incremento.

Figura 5 - Diagrama do Ciclo de Vida Iterativo e Incremental.

Fonte: http://wiki.sj.ifsc.edu.br/wiki/images/1/1c/Iterativo_e_incremental.jpg. Acesso em 25/05/2016.

 30

Figura 6 – Entrega incremental.

Fonte: Sommerville, 2007, p.47.

A cada nova entrega é adicionada uma funcionalidade nova ao sistema, de

acordo com a necessidade do cliente, como o produto a ser desenvolvido possui
funções principais, que necessitam estar funcionando a partir do momento em que a
loja for colocada online, as primeiras entregas serão de fundamental importância
para o funcionamento do sistema, em seguida serão apresentadas as entregas
adicionais que agregam valor ao sistema, com funcionalidades que se não
existissem o software funcionaria perfeitamente, porem adicionam valor ao projeto.

3.4. Ferramentas para documentação do projeto

Todo projeto de desenvolvimento necessita de se ter documentado seu
desenvolvimento, para evitar diversos problemas durante o desenvolvimento e após
a elaboração do sistema. Eliminando dependências de desenvolvedores, caso haja,
facilitando a análise de problemas e projeções para futuras melhorias. Visando essa
tarefa existem ferramentas que auxiliam nessa documentação.

Para a documentação deste desenvolvimento foi utilizado a ferramenta

Unified Modeling Language (UML), que significa linguagem de modelagem unificada,
na qual traz os principais diagramas para a documentação do desenvolvimento da
aplicação.

3.4.1. UML
Segundo Booch, Rumbaugh e Jacobson (2005), a UML é uma linguagem
gráfica para a visualização, especificação, construção e documentação de partes
complexas do sistema. A UML proporciona uma forma padrão para a preparação de
planos de arquitetura de projetos de sistemas, incluindo aspectos conceituais como
processos de negócios e funções do sistema, além de itens concretos como as
 31

classes escritas em determinada linguagem de programação, esquemas de banco

de dados e componentes de softwares reutilizáveis.

A UML é usada para modelar o sistema, e há muito tempo a modelagem é

uma técnica de engenharia aprovada e bem aceita (Booch, Rumbaugh, Jacobson,
2005).

A modelagem é feita para que se possa compreender da melhor maneira

possível a aplicação que será elaborada, com o objetivo de transferir para o papel
uma representação da realidade de maneira simples.

Serão utilizados aqui, alguns modelos de modelagem propostos pela UML,

para poder transmitir e definir as especificações do projeto.

3.4.2. Casos de uso

Os casos de uso especificam como um sistema ou parte dele se comporta e

descreve um conjunto de sequências de ações, que incluem variáveis realizadas
pelo sistema para fabricar um resultado observável do valor de um ator (Booch,
Rumbaugh, Jacobson, 2005).

Os casos de uso são estruturados da melhor forma, e denotam apenas o

comportamento essencial do sistema e não são amplamente gerais e nem são muito
específicos (Booch, Rumbaugh, Jacobson, 2005).

Por serem de simples e fácil entendimento, sem possuir muitos detalhes

técnicos e sem conter muitos detalhes específicos de cada funcionalidade, os casos
de usos são ideias para serem apresentados a usuários, clientes para o fácil
entendimento do que foi projeto o do que está sendo projetado.

3.4.3. Diagramas de sequência

Booch, Rumbaugh e Jacobson (2005), caracterizam os diagramas de

sequência como diagramas de interação que dão foco na ordenação temporal de
mensagens. Um diagrama de interação mostra uma interação formada por uma
junção de objetos e seus relacionamentos, incluindo as mensagens que poderão ser
trocadas entre eles.
Um diagrama de sequência apresenta a sequência de fatos, ações, trocadas
pelo objeto até que uma ação seja terminada.
 32

3.4.4. Diagrama de atividade

Diagramas de atividades apresenta o fluxo de atividade de um processo,

exibindo qual atividade depende de outra para ser executada. É essencialmente um
gráfico de fluxo das atividades, mostrando o controle do fluxo de uma atividade para
outras.

3.4.5. Diagrama de classe

O diagrama de classes apresenta uma reprodução das classes do sistema,

suas estruturas dos objetos e seus relacionamentos. É o diagrama principal da
programação orientada objeto. É uma das principais modelagens para o
desenvolvimento do sistema.
 33

4. DESENVOLVIMENTO PARA WEB

O desenvolvimento web refere-se à construção de softwares específicos para

a web, podendo variar de simples páginas estáticas a aplicações de peso, comércios
eletrônicos ou redes sociais. O desenvolvimento para web pode variar muito,
existem diversas ferramentas, frameworks, linguagens que podem ser usadas na
web e a cada dia que se passa novas ferramentas vão surgindo, com o objetivo de
facilitar o desenvolvimento cada vez mais.

Segundo a Caelum (2004A):

Vivemos hoje numa era em que a Internet ocupa um espaço cada vez mais
importante em nossas vidas pessoais e profissionais. O surgimento
constante de Aplicações Web, para as mais diversas finalidades, é um sinal
claro de que esse mercado está em franca expansão e traz muitas
oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais,
filmes, músicas, notícias, comércio e tantas outras áreas estão presentes na
Internet, fazendo do navegador (o browser) o software mais utilizado de
nossos computadores.

Acrescentado Caelum (2004A):

Além do acesso por meio do navegador de nossos computadores, hoje o
acesso à Internet a partir de dispositivos móveis representa um grande
avanço da plataforma, mas também implica em um pouco mais de atenção
ao trabalho que um programador front-end tem que realizar.

De acordo com Pressman (2011), os softwares estão categorizados em vários

tipos. Um desses tipos é o software de web ou para web, que são aplicativos
executados via Internet, através do auxílio do browser.
Com o passar dos anos, as aplicações web evoluíram rapidamente de
simples web sites cujo propósito era apenas navegação sobre a informação
para verdadeiros sistemas de informação altamente complexos, repletos de
dados e transações, voltados para a implementação de processos de
negócio intra e interorganização. Diante deste quadro, a necessidade de um
processo de software sistemático que ajude a gerenciar o ciclo de vida de
tais aplicações surge naturalmente. (JACYNTHO, 2009, p.06).

4.1. World Wide Web

O termo web é a forma curta de World Wide Web, então quando falamos de
web estamos nos referindo a World Wide Web ou WWW.
De acordo com Albertin (2010, p.35) a World Wide Web é considerada
uma coleção de documentos distribuídos, referenciados como páginas, localizados
em computadores e servidores de todo o mundo. Os servidores ou computadores
residenciais armazenam arquivos em hypertext mark-up language e respondem a
solicitações quando seus endereços são digitados em um navegador.
 34

Para se utilizar a WWW um usuário necessita de estar conectado à internet

com algum dispositivo que aceite um software do tipo navegador, o navegador atua
como uma interface gráfica entre o usuário e a Internet, enviando os comandos
necessários para solicitar dados de outro computador ou servidor e então formata
para a tela do usuário. As outras duas partes da arquitetura WEB são: HTTP, o
protocolo para a comunicação entre os servidores e browsers da WWW e o CGI,
interface para invocar programas dos servidores da WWW.
A criação da internet em conjunto com a WWW foi de fundamental
importância para o desenvolvimento do comércio eletrônico, pois sem elas o CE não
teria toda a abrangência e importância que está conseguindo atualmente.

Segundo Albertin (2010) com a internet, o e-commerce foi se direcionando ao

consumidor individual e também a realização de transação comercial entre
empresas de todos os tamanhos, uma vez que o preço é fixo, independentemente
da quantidade de informação transportada, o acesso é barato e na maior parte das
vezes seguro, devido à grande evolução nas técnicas de defesa as fraudes ou
tentativas de ataques de terceiros.

A internet surgiu a partir de pesquisas no meio militar, no auge da guerra fria.

Como um modelo de troca de informações e assim revolucionou o mundo em que
vivemos, sendo hoje uma das maiores fontes de informação, entretenimento,
comércio entre outros.

O principal órgão responsável pelo desenvolvimento da Web Semântica é o

World Wide Web Consortium (W3C), comunidade internacional, que desenvolve
padrões abertos e que tem como principal objetivo levar a Web para seu potencial
máximo, garantindo seu crescimento em longo prazo.

Segundo a W3C (2012) a web se diferencia da internet da seguinte forma:

A internet é um sistema global de redes de computadores interconectados

que realiza troca de dados por troca de pacotes utilizando o protocolo padronizado
Internet Protocol Suite (TCP / IP). Assim, a internet é uma rede de “redes”, definidas
pelas normas do TCP / IP.

A web, por outro lado, é definida na W3C (2012A) como um espaço de

informação na qual os itens de interesse, são identificados por identificadores
globais chamados de Uniform Resource Identifiers. Assim a web é um espaço de
 35

informações, onde existem especificações para as tecnologias a serem utilizadas,

sendo as mais conhecidas URL’s, HTTP e HTML.

Atualmente, a Web é um espaço distribuído de informação que provê uma

abundância de fontes de informação heterogêneas e em muitos formatos. Porém, a
troca de informações na Web só é possível quando há acordo no estabelecimento
de formatos de dados padrão e na exploração dos hiperlinks que tornam os recursos
distribuídos em estruturas do tipo Web. Vale destacar que essas estruturas não são
somente utilizadas pelos agentes humanos para a leitura e para a navegação, mas
também por mecanismos de busca para a coleta e para o ranking de páginas.

4.2. Diferenças básicas no desenvolvimento web

Levando em consideração que o desenvolvimento de uma aplicação para web
possui características diferentes de uma aplicação desktop, alguns cuidados devem
ser tomados na hora de realizar o desenvolvimento. O auxílio da engenharia de
software é fundamental, porem são necessários conhecimentos na área da web para
que possa se realizar o desenvolvimento.
Segundo Jacyntho (2009) o desenvolvimento de aplicações web apresenta
diferenças significativas com relação ao desenvolvimento de aplicações
convencionais. O espectro varia desde diferenças técnicas até a organização do
software.
Diferenças técnicas significam as arquiteturas e tecnologias específicas
empregadas e os impactos envolvidos. Já as organizacionais são relacionadas ao
uso estratégico destas aplicações visando melhorar o negócio. Dentre outros fatores
como: design, volatilidade e alta competitividade são características inerentes que
precisam ser consideradas. Por conseguinte, a natureza da engenharia para web
sugere a necessidade de processos de software especializados que atendam, de
forma sistemática, o ciclo de vida completo de aplicações web hipermídia.
Quando se desenvolve uma aplicação para a web é preciso saber como o
ambiente web funciona, seus protocolos, a elaboração de sua interface, sua
persistência de dados entre outros fatores exclusivos da web. As aplicações web
possuem algumas vantagens com relação aos sistemas desktop, como sua
disponibilidade de uso em qualquer dispositivo, contando apenas que ele tenha
 36

acesso a internet, suas vantagens giram em torno da internet da sua praticidade e

versatilidade que ela disponibiliza.
 37

5. FERRAMENTAS

Para o desenvolvimento desse trabalho foram utilizados diversas ferramentas

e diferentes linguagens de programações. Como se trata de um trabalho com
desenvolvimento prático de um software, serão apresentadas as ferramentas para a
produção do mesmo, vale lembrar que atualmente existem várias opções de
ferramentas para desenvolvimento web e a cada dia que se passa novas
ferramentas são criadas. A escolha das ferramentas apresentadas a seguir foi com
base na pesquisa exploratória, das opções existentes atualmente no mercado,
levando em consideração sua dificuldade de uso, fabricante de desenvolvimento e
principalmente a sua efetividade na elaboração da loja virtual.

5.1. Cloud9

Ferramenta utilizada para dar enfoque ao trabalho, devido a sua versatilidade

e facilidade de uso.
De acordo com o próprio fundador e Chief Executive Officer (CEO), Ruben
Daniëls (2010) a empresa foi fundada em 2010 e sediada em São Francisco e
Amsterdã, é uma plataforma web que fornece um Integrated Development
Environment (IDE), conhecido como ambiente de desenvolvimento integrado, na
nuvem, ou seja, todos arquivos são armazenados online numa máquina virtual em
outro país e que permite iniciar a codificação de um software imediatamente sem a
necessidade da instalação de softwares no computador do usuário. Possuindo a
vantagem de várias pessoas trabalharem no mesmo projeto ao mesmo tempo e de
qualquer lugar. Tendo compatibilidade com diversas linguagens de programação,
como: Java, HTML5, PHP, entre outras. Com três anos de experiência em
desenvolvimento de IDE nas nuvens e perto de meio milhão de usuários registrados
a missão da empresa é demonstrar os benefícios de se escrever na nuvem.

O ambiente de desenvolvimento Cloud9 apresenta diversas vantagens para

um programador, dentre elas as principais são:

 Possibilidade de codificação imediata.

Para se poder codificar no ambiente em nuvem basta apenas criar uma conta
no site da empresa, que fornece planos gratuitos e pagos, escolher o tipo de
tecnologia a qual deseja trabalhar, desenvolver, e iniciar sua máquina virtual. A
 38

máquina virtual disponibilizada apresenta o sistema operacional Linux, sendo

possível efetuar diversas alterações no ambiente de desenvolvimento para atender
as necessidades do usuário. Não é necessário realizar configurações de servidores
para iniciar a construção da aplicação.

 Possibilidade de se programar em qualquer computador que consiga rodar

um browser.

Devido a aplicação rodar em uma máquina virtual ela não necessita que sua
máquina sustente os processos necessários para o desenvolvimento da aplicação, a
máquina virtual consiste numa instância de um computador, de sua virtualização, em
um computador físico, ou seja, é um computador rodando dentro de outro
computador só que virtualmente.

 Possibilidade de codificação em qualquer lugar do planeta, apenas

necessitando do acesso à internet.
Por ser uma plataforma em nuvem, o seu acesso é disponibilizado em
qualquer lugar do mundo, basta ter um dispositivo que tenha um browser e esteja
conectado à internet.
Cloud9 é uma IDE open source, ou seja, o código fonte de sua aplicação está
disponível para o público, possibilitando assim um crescimento pela própria
comunidade de usuários sem travamento por parte da empresa.
Sua utilização pode ser feita tanto gratuitamente, bastando apenas criar uma
conta em seu site para poder utilizar ou assinar um plano mensal, possuindo
vantagens extras para seus workspaces (áreas de trabalho).
A figura 7 apresenta um worksapce de desenvolvimento disponibilizado pela
Cloud9.
 39

Figura 7 - Ambiente de Desenvolvimento Cloud9.

Fonte: Próprio autor.

 40

5.3. HTML

Segundo sua atual publicadora, a W3C (2012B), o Hypertext Markup

Language é a linguagem de programação para a publicação de hipertexto na World
Wide Web e pode ser criado e processado por uma ampla gama de ferramentas, a
partir de editores de texto sem formatação simples até ferramentas sofisticadas.
HTML utiliza tags (marcações), para estruturar o texto em cabeçalhos, parágrafos,
listas, links de hipertexto, entre outros elementos. HTML é a linguagem central da
Web, para a criação de conteúdo. A figura 8 apresenta um exemplo de código em
HTML.

Figura 8 – Exemplo de codificação em HTML.

Fonte: https://www.w3.org/html/. Acesso em 25/05/2016.

5.4. CSS

De acordo com a equipe da W3C (2012B), mesma atual publicadora da

linguagem HTML, o Cascading Style Sheets (CSS) é um mecanismo para adicionar
estilo, formas definidas, fontes de letra e cor à um documento Web, normalmente
produzido em HTML. É a linguagem que adaptada a estrutura do site para diferentes
tipos de dispositivos e tamanhos de tela. O CSS é independente do HTML e pode
ser usado com qualquer linguagem baseada XML-based markup language. HTML e
CSS são a base da construção de páginas web e aplicações web. A figura 9
apresenta um exemplo de codificação em CSS.

Figura 9 – Exemplo de codificação em CSS.

Fonte: https://www.w3.org/standards/webdesign/htmlcss. Acesso em 25/05/2016.

 41

5.5. JavaScript

JavaScript é uma linguagem de programação de script orientada a objetos,

multiplataforma, utilizada para desenvolvimento em ambiente Web.

Scripts são textos que inserem uma série de instruções que são interpretadas
pelo processador lógico do computador para que o mesmo realize funções e
aplicações definidas pelo código.

Uma linguagem de programação orientado a objetos é uma linguagem de alto

nível que permite ao programador codificar em uma linguagem muito próxima à
humana e mais distante da linguagem da máquina, dessa forma assim cobre-se o
"gap semântico", ou seja, a distância entra a linguagem humana e da máquina. A
figura 10 apresenta um exemplo de codificação em JavaScript.

Segundo a Caelum (2004B):

No início da Internet as páginas eram pouco ou nada interativas, eram

documentos que apresentavam seu conteúdo exatamente como foram
criados para serem exibidos no navegador. Existiam algumas tecnologias
para a geração de páginas no lado do servidor, mas havia limitações no que
diz respeito a como o usuário consumia aquele conteúdo. Navegar através
de links e enviar informações através de formulários era basicamente tudo o
que se podia fazer.
JavaScript tornou-se uma das linguagens de programação mais utilizadas na
atualidade, de acordo com a Caelum (2004B):
Visando o potencial da Internet para o público geral e a necessidade de
haver uma interação maior do usuário com as páginas, a Netscape, criadora
do navegador mais popular do início dos anos 90, de mesmo nome, criou o
Livescript, uma linguagem simples que permitia a execução
de scripts contidos nas páginas dentro do próprio navegador.
Aproveitando o iminente sucesso do Java, que vinha conquistando cada vez
mais espaço no mercado de desenvolvimento de aplicações corporativas, a
Netscape logo rebatizou o Livescript como JavaScript num acordo com a
Sun para alavancar o uso das duas. A então vice-líder dos navegadores,
Microsoft, adicionou ao Internet Explorer o suporte a scripts escritos em
VBScript e criou sua própria versão de JavaScript, o JScript.
JavaScript é a linguagem de programação mais popular no desenvolvimento
Web. Suportada por todos os navegadores, a linguagem é responsável por
praticamente qualquer tipo de dinamismo que queiramos em nossas
páginas.
Se usarmos todo o poder que ela tem para oferecer, podemos chegar a
resultados impressionantes. Excelentes exemplos disso são aplicações
Web complexas como Gmail, Google Maps e Google Docs.
 42

Figura 10 – Exemplo de codificação em JavaScript.

Fonte: https://www.caelum.com.br/apostila-html-css-javascript/javascript-e-interatividade-na-web/#11-
2-a-tag-script. Acesso em 25/05/2016.

5.6. Programação MVC

MVC vem do termo em inglês ModelViewController, este conceito utiliza

camadas de programação, no qual são divididas em 3 níveis de codificação:

M – Model (Modelo)

Contém as regras de negócio, isso é, todas as validações de campos, acesso

à banco de dados e validações de arquivos são desenvolvidos nessa camada.

V – View (Visualização)

Este nível tem como função principal a exibição das informações, botões,
telas, dados e cálculos.

C – Controller (Controle)

A camada de controle é utilizada para delegar solicitações enviadas da parte

de Visualização para a parte de Modelo.

MVC é um padrão de projeto a ser seguido, no qual a lógica da aplicação, a

exibição dos dados ao usuário e o controle da aplicação são separados em camadas
para que o projeto possa ficar melhor organizado.
 43

Figura 11 - Diagrama MVC.

Fonte: https://alexandregama.files.wordpress.com/2011/03/mvc.png. Acesso em 25/05/2016.

5.7. Java

Java atualmente é a linguagem de programação mais utilizada no mundo

todo, segundo Albertin (2010, p.36) a linguagem Java está tornando-se muito
popular no desenvolvimento de aplicações para a WWW. Essa linguagem incorpora
todos os elementos críticos para uma programação de WWW de sucesso. É fácil de
utilizar, é processada em múltiplas plataformas e é compacta.

Adicionalmente, a linguagem Java resolve a largura de banca crítica e

gargalos de processador, por meio de seu projeto, e abre um mundo completamente
novo de interatividade para os desenvolvedores de conteúdo e usuários finais. Java
é uma linguagem simples, orientada para objeto, multifuncional, formada por blocos,
segura, robusta, neutra de arquitetura, portável, de alto desempenho e dinâmica. Os
programas em Java são compilados num formato binário que pode ser executado
em muitas plataformas, sem recompilação, devido ao uso de sua JVM (Java Virtual
Machine) compilar o código binário em diferentes sistemas operacionais. Esse
formato binário é denominado de byte code independent. Algumas vantagens de
desenvolvimento de aplicações web em Java são:

 Facilidade de distribuição.
 44

 Velocidade de desenvolvimento.
 Massa crítica de desenvolvedores.
 Aderência ao paradigma da WWW.
 Suporte de terceiros.

Segunda a Caelum (2004C):

Certamente o mercado com mais oportunidades em que o Java está

presente é o de Web. Não é por acaso sua popularidade: criar um projeto
com Java dá muita liberdade, evitando cair no vendor lock-in. Em outras
palavras, sua empresa fica independente do fabricante de vários softwares:
do servlet container, do banco de dados e até da própria fabricante da sua
Virtual Machine! Além disso, podemos fazer todo o desenvolvimento em um
sistema operacional e fazer o deploy (implantação) em outro.
A figura 12 apresenta um exemplo de codificação em Java.

Figura 12 – Exemplo de codificação em Java.

Fonte: https://www.caelum.com.br/apostila-java-orientacao-objetos/o-que-e-java/#2-12-o-que-
aconteceu. Acesso em 25/05/2016.
 45

6. PLANEJAMENTO E DESENVOLVIMENTO DO SITE

O presente capítulo tem como finalidade apresentar os resultados adquiridos

durante o desenvolvimento do sistema. Definido pelo método de desenvolvimento
incremental os resultados serão apresentados em módulos principais e futuras
melhorias. Sendo apresentado nos módulos principais o básico do funcionamento do
sistema e os módulos secundários melhorias que podem ser realizadas para uma
melhor experiência na utilização da loja virtual.

6.1. Estudo de caso

O mercado escolhido para a elaboração da loja virtual é o mercado de jogos
eletrônicos. Segundo Mancuso (2015), em reportagem ao G1:
O mercado de videogames movimenta US$ 66 bilhões em vendas por ano no
mundo. E o Brasil contribui com uma boa fatia nesta conta: US$ 1 bilhão. É tanta
gente comprando que, no período de 2009 a 2014, as vendas de jogos online
cresceram 256% e as de joguinhos mobile, aqueles que rodam em tablets e
celulares, 780%.

O ramo de jogos eletrônicos vem crescendo rapidamente ao longo dos últimos

anos, de acordo com o G1 (2015), o mercado brasileiro de jogos tem crescido na casa
de 25% a 30% ao ano.

Com base nesses números, justifica-se a criação de um e-commerce de jogos

eletrônicos no Brasil, visando um mercado que está em crescimento e com grandes
facilidades de vendas, devido a seu produto possibilitar a venda eletronicamente ou
fisicamente.

A revenda de jogos digitais é facilitada devido as características do produto.

Sendo o jogo vendido virtualmente, sem a necessidade de mídia física o cliente recebe
seu item na mesma hora, evitando a possibilidade de conter defeitos no artefato
adquirido ou problemas de entrega, já a revenda física possui a possibilidade de ocorrer
problemas durante a entrega da mercadoria ou defeitos no produto, porém devido ao
objeto ser de fácil manipulação o envio e troca do mesmo é efetuado de forma simples.

Os requisitos e a ideia da elaboração da loja virtual provem do próprio autor,

sendo apenas um exemplo de e-commerce para demonstrar as fases do
desenvolvimento do mesmo.
 46

6.2. Levantamento de requisitos

O levantamento de requisitos é a peça fundamental para o bom
desenvolvimento de um software, todos os requisitos devem ser analisados e
validados por ambas as partes, tanto cliente como desenvolvedor.

Primeiro foi realizado uma análise dos requisitos mais abrangente, levando
em consideração o mercado escolhido, quais as tendências e novidades existente
nele, chegando assim numa definição de quais as melhores escolhas para o
desenvolvimento do projeto.

De acordo com Sommerville (2007, p.79) os requisitos de um sistema são

descrições de serviços que devem ser fornecidos e também suas restrições
operacionais.

6.2.1. Requisitos do projeto

Os requisitos do projeto foram divididos em três partes, requisitos gerais,
funcionais e não funcionais. Requisitos gerais são os requisitos básicos do sistema,
os quais ditam as características fundamentais do sistema. Requisitos funcionais
são requisitos que definem uma função do sistema. Requisitos não funcionais são
requisitos relacionados ao uso da aplicação.
Requisitos gerais:
 Loja intuitiva, sem imagens ou banners pesados;
 Layout simples;
 Facilidade no uso;
 Adaptabilidade aos diversos dispositivos;

Requisitos funcionais:
 Cadastro de usuário;
 Compra de produtos;
 Alteração de cadastro;
 Envio de e-mails de pedidos;
 Controle de acesso ao administrador;
 Controle de pedidos;
 47

Requisitos não funcionais:

 Confiabilidade;
 Segurança;
 Desempenho;

6.3. Primeiro incremento

O desenvolvimento do projeto está dividido em três incrementos principais,

sendo o primeiro incremento a página inicial e página de autenticação, juntamente
foi elaborada toda a documentação do projeto, incluindo diagramas, modelos, entre
outros tipos de documentação. O primeiro incremento é o maior dentre os três,
devido ser a base do projeto para a construção do mesmo.

6.3.1. Documentação
Por se tratar de um modelo de desenvolvimento incremental boa parte da
documentação pode ser feita diretamente no código, como existem as etapas de
interação, voltando ao incremento até que ele esteja pronto, a documentação foi
pensada mais nos fluxos de como o sistema deve se comportar na entrega final.
Durante o primeiro incremento foi desenvolvido o diagrama apresentado na
figura 13, conhecido como diagrama de caso de uso, este diagrama representa o
funcionamento do sistema. No diagrama há balões que representam ações que
podem ser efetuadas no sistema, bonecos que são os atores que interagem com o
sistema. Encontra-se também o uso das palavras “include”, que são ações inclusas
na continuação do ato anterior e “extend”, que são ações opcionais que podem ou
não ocorrer na sequência.

O Diagrama (figura 14) apresenta o diagrama de sequência exibindo como as

mensagens são trocadas entre os objetos do sistema, até que se termine uma ação.
A ação escolhida para realizar o diagrama foi a criação de um pedido dentro da loja
virtual.
 48

Figura 13 – Diagrama de casos de usos da loja virtual.

Fonte: Próprio autor.

 49

Figura 14 – Diagrama de sequência de compra.

Fonte: Próprio autor.

 50

Figura 15 – Diagrama de classe.

Fonte: Próprio autor.

A figura 15 apresenta um diagrama de classe o qual representa todas as

classes contidas no sistema.
 51

Figura 16 – Diagrama de atividade, fazer autenticação site.

Fonte: Próprio autor.

A figura 16 apresenta um diagrama de atividade, a ação escolhida para esse

diagrama foi o evento de autenticação de usuário na loja virtual.
A figura 17 apresenta um diagrama entidade relacionamento do banco de
dados da aplicação, nesse diagrama é apresentado a ligação entre as tabelas do
banco de dados, bem como a representação de seus dados. O diagrama de
entidade relacionamento é utilizado na engenharia de software para descrever as
entidades envolvidas no sistema, seus atributos e seus relacionamentos.
 52

Figura 17 – Diagrama entidade relacionamento.

Fonte: Próprio autor.

 53

Figura 18 – Diagrama de atividade, alterar senha.

Fonte: Próprio autor.

Figura 19 – Diagrama de atividade, recuperar senha.

Fonte: Próprio autor.

 54

6.4. Resultados do primeiro incremento

O primeiro incremento foi destinado as funções básicas da tela inicial do

sistema e cadastro de usuário. Foi definido o layout base da loja, bem como sua
estrutura de páginas. Os resultados do primeiro incremento seguem nas figuras 20 e
21.
Pode-se notar que o incremento atendeu os requisitos solicitados, utilizando
das ferramentas citadas para atingir esses objetivos.

Figura 20 – Página inicial.

Fonte: Próprio autor.

 55

A página de autenticação possui verificações internas, para o cadastro de

novos usuários e realização de autenticação de usuários cadastrados. Como
apresentado nas figuras 18 e 19 é possível efetuar as ações de alterar senha ou
recuperar senha de contas cadastradas.

Figura 21 – Página de autenticação.

Fonte: Próprio autor.

6.5. Segundo incremento

O segundo incremento foi destinado a criação da página de produtos e da
página do carrinho, bem como todo a estrutura envolvida para a realização desse
cadastro de produto e pedido na loja.

6.6. Resultados do segundo incremento

As figuras 22 e 23 apresentam os resultados do segundo incremento. Na
página de produto é possível visualizar as informações dos produtos, bem como
fazer a consulta do cep para realizar a compra. A página do carrinho apresenta os
produtos adicionados, para em seguida realizar um pedido.
 56

Figura 22 – Página de produtos.

Fonte: Próprio autor.

Figura 23 – Página do carrinho.

Fonte: Próprio autor.

 57

6.7. Terceiro incremento

O terceiro incremento destina-se a realização do pagamento do pedido e o
cadastro desse pedido na conta do usuário. Devido a necessidade de
implementações de gateways de pagamento, para se poder realizar o pagamento,
foi escolhido uma forma alternativa para realizar esse pagamento, utilizando-se
empresas terceiras para intermediar esse pagamento, porém mesmo assim é
necessário cadastro de contas bancarias e autenticações do vendedor.

Gateways de pagamento são utilizados para que se possa pagar diretamente

na loja virtual, são empresas que fornecem serviços de autenticações de pagamento
para que se possa implementar as possíveis formas de pagamentos existentes no
mundo virtual.

6.8. Resultados do terceiro incremento

O terceiro incremento é apresentado nas figuras 24 e 25, contendo a página
de pagamento e de pedidos do site. Como citado anteriormente foi utilizado um
serviço terceirizado para poder realizar o pagamento via loja virtual, evitando a
necessidade de contratação de serviços de pagamento e contratos com bancos.
 58

Figura 24 – Página de pagamento.

Fonte: Próprio autor.

 59

Figura 25 – Página de pedidos.

Fonte: Próprio autor.

6.9. Possíveis melhorias

Para melhorias futuras é possível se adicionar uma estrutura de organização
da loja virtual, com inclusão de produtos manuais, visualização de pedidos e controle
de usuários. Uma ferramenta de e-mail marketing é recomendado, para que e-mails
de novidades e promoções possam ser enviados aos clientes cadastrados na loja.
 60

7. CONSIDERAÇÕES FINAIS

O objetivo principal desse trabalho foi demonstrar por meio do

desenvolvimento de uma loja virtual, as vantagens que o e-commerce pode trazer
para uma empresa, tanto monetariamente quanto na divulgação da mesma. Ao
alcançar o objetivo proposto inicialmente, conclui-se que através das pesquisas e
dados apresentados, a adição de um comércio eletrônico traz benéficos a empresa,
quando desenvolvido adequadamente.

Com as pesquisas efetuadas, podemos constatar que o mercado online

possui uma crescente evolução ao longo do tempo, mostrando que atualmente as
empresas já possuem parte de sua renda via comércio eletrônico ou sendo
totalmente dependente de suas lojas virtuais. Tudo isso devido à internet e sua
potência global.

A partir da quantificação e análise dos dados, justifica-se a importância da

pesquisa realizada, antecedendo o processo de desenvolvimento do sistema,
observa-se o grande aumento do mercado de jogos no Brasil, viabilizando assim a
construção de um sistema para a venda dos mesmos.

Foram apresentadas diversas ferramentas utilizadas para o desenvolvimento

do sistema, as quais futuramente podem não ser mais as melhores escolhas para a
elaboração de um sistema semelhante, elas foram escolhidas baseadas nas
tecnologias presentes na atualidade, podendo sofrer alterações no futuro.

Possíveis implementações futuras foram apresentadas para tornar o sistema

mais completo e vantajoso de se utilizar, além de facilitar o seu uso, porém as
funcionalidades básicas de uma loja virtual foram implementadas com sucesso,
podendo ser usada atualmente, apenas necessitando da aquisição de uma empresa
que forneça formas de pagamentos online.

Conclui-se que o objetivo do trabalho foi alcançado, demonstrando através de

pesquisas os fatores que levam a uma loja virtual trazer benefícios para as
empresas atualmente e o exemplo de desenvolvimento de uma loja virtual utilizando
a ferramenta de desenvolvimento Cloud9.
 61

8. REFERÊNCIAS BIBLIOGRÁFICAS

ALBERTIN, Alberto Luiz. Comércio Eletrônico: Modelo, Aspectos e Contribuições

de sua Aplicação. 6. ed. São Paulo: Atlas, 2010. 306 p.

ASSENCIO, Claudia (São Paulo). Exame (Org.). Ibope aponta que acesso à
internet cresce 3% no 2º tri. 2013. Disponível em:
<http://exame.abril.com.br/tecnologia/noticias/ibope-aponta-que-acesso-a-internet-
cresce-3-no-2o-tri>. Acesso em: 04 maio 2016.

BOOCH, Grady; RUMBAUCH, James; JACOBSON, Ivar. UML: Guia do Usuário. 2.

ed. Rio de Janeiro: Elsevier, 200p.

CAELUM (Brasil). Sobre o curso – o complexo mundo do front-end. 2004A.

Disponível em: <https://www.caelum.com.br/apostila-html-css-javascript/sobre-o-
curso-o-complexo-mundo-do-front-end/>. Acesso em: 19 maio 2016.

CAELUM (Brasil). JavaScript e interatividade na Web. 2004B. Disponível em:

<https://www.caelum.com.br/apostila-html-css-javascript/javascript-e-interatividade-
na-web/>. Acesso em: 19 maio 2016.

CAELUM (Brasil). Enfrentando o Java na Web. 2004C. Disponível em:

<https://www.caelum.com.br/apostila-java-web/enfrentando-o-java-na-web/#1-1-o-
grande-mercado-do-java-na-web>. Acesso em: 19 maio 2016.

CAMERON, Debra. Electronic Commerce: The New Business Platform for the
Internet. 1. ed. Computer Technology Research Corp., 1997. 240 p.

E-BIT (São Paulo). E-commerce fatura r$ 10,2 bilhões no primeiro semestre de

2012. 2012. Disponível em: <https://empresa.ebit.com.br/noticias-1.asp>. Acesso
em: 04 maio 2016.

E-BIT (São Paulo). E-commerce supera expectativas: E-commerce fatura R$ 35,8

bi em 2014. 2015. Disponível em:
<https://empresa.ebit.com.br/clip.asp?cod_noticia=3959&pi=1>. Acesso em: 04 maio
2016.

FOINA, Paulo Rogério. Tecnologia da informação: planejamento e gestão. São

Paulo: Atlas, 2001.
 62

G1 (Brasil). Brasil está crescendo no lucrativo mercado dos jogos

eletrônicos: Sony decidiu fabricar seu videogame mais famoso no Brasil. Hoje
existem 200 empresas de games no país.. 2015. Disponível em:
<http://g1.globo.com/jornal-da-globo/noticia/2015/07/brasil-esta-crescendo-no-
lucrativo-mercado-dos-jogos-eletronicos.html>. Acesso em: 27 maio 2016.

JACYNTHO, Mark Douglas de Azevedo. Processos de Desenvolvimento para

Aplicações Web. 2009. Disponível em: <ftp://ftp.inf.puc-
rio.br/pub/docs/techreports/09_23_jacyntho.pdf>. Acesso em: 22 maio 2016.

KALAKOTA, R. ; WHINSTON, A. Electronic Commerce: A Managers Guide. New

York: Addison- Wesley, 1997.

MANCUSO, Filippo (Brasil). G1. Mercado de games fatura cerca de US$ 1 bilhão
por ano no Brasil: No mundo inteiro, por ano, mercado brasileiro é o terceiro que
mais cresce. Entre 2009 e 2014 as vendas de jogos mobile cresceram incríveis
780%. 2015. Disponível em: <http://g1.globo.com/jornal-da-
globo/noticia/2015/10/mercado-de-games-fatura-cerca-de-us-1-bilhao-por-ano-no-
brasil.html>. Acesso em: 25 maio 2016.

PRESSMAN, Roger S.. Engenharia de Software: Uma abordagem Profissional.

Trad. Ariovaldo Griesi. 7. ed. São Paulo: Bookman, 2011. 780 p.

RUBEN, Daniëls (San Francisco). Cloud9. About Cloud9. 2010. Disponível em:
<https://c9.io/site/about>. Acesso em: 23 maio 2016.

SOMMERVILLE, Ian. ENGENHARIA DE SOFTWARE. Trad. Selma Shin Melnikoff;

Reginaldo Arakaki; Edilson de Andrade Barbosa. 8. ed. São Paulo: Pearson -
AddisonWesley, 2007. 568 p.

THE WORLD BANK (Washington). Brasil. 2013. Disponível em:

<http://data.worldbank.org/country/brazil/portuguese>. Acesso em: 04 maio 2016.

W3C (Estados Unidos). HELP AND FAQ. 2012A. Disponível em:

<https://www.w3.org/Help/#activity>. Acesso em: 22 maio 2016.

W3C (Estados Unidos). HTML & CSS. 2012B. Disponível em:

<https://www.w3.org/standards/webdesign/htmlcss>. Acesso em: 22 maio 2016.