Aula Prática Desenvolvimento de e-commerce com CMS

Aula Prática Desenvolvimento de e-commerce com CMS

CLIQUE AQUI PARA VISUALIZAR O MANUAL! 

ROTEIRO DE AULA PRÁTICA

NOME DA DISCIPLINA: Desenvolvimento de e-commerce com CMS

Unidade 3

Seção 3.3

OBJETIVOS

Definição dos objetivos da aula prática:

Realizar o download e instalação do wordpress em um servidor local;

Realizar a instalação do plugin “woocommerce” ao wordpress;

Configurar uma loja utilizando o painel administrativo;

Realizar o cadastramento de alguns itens iniciais para uma loja padrão;

Estilizar a página inicial;

Testar a aplicação desenvolvida.

INFRAESTRUTURA

Instalações:

Laboratório de Informática

Materiais de consumo:

Descrição

Quantid. de materiais por

procedimento/atividade

Não se aplica.

Software:

Sim ( X ) Não ( )

Em caso afirmativo, qual? XAMPP e WordPress.

Pago ( ) Não Pago ( X )

Tipo de Licença: Gratuita.

Descrição do software:

WordPress: plataforma de publicação de código aberto, popular para criação e gerenciamento de

sites e blogs.

3

XAMPP: pacote de software gratuito e de código aberto que fornece um ambiente de

desenvolvimento web.

Equipamento de Proteção Individual (EPI):

Não se aplica.

PROCEDIMENTOS PRÁTICOS

Procedimento/Atividade Nº 1

Atividade proposta:

Configurar o ambiente de instalação para o framework Woocommerce (wordpress), instalar o

mesmo e realizar as configurações iniciais de uma loja padrão: inserção de categorias, produtos,

configuração de métodos de pagamento, entrega e estilização da página inicial.

Procedimentos para a realização da atividade:

Para a realização desta aula pratica você deverá ter o software ter o XAMPP instalado no seu

computador.

Faça o download e instale na sua máquina: https://www.apachefriends.org/download.html.

1. Localize o local onde o XAMPP foi instalado no seu computador e crie uma pasta com o

nome “woocommerce” dentro do caminho “xampphtdocs”.

2. Faça o download do WordPress: https://wordpress.org/download/

3. Descompacte o arquivo e copie o seu conteúdo para dentro da pasta “woocommerce”.

4. Procure pelo aplicativo Xampp Control Panel e execute o mesmo. Clique em “start” tanto

para a opção “Apache” quanto “MySql”. Seu servidor localhost estará ativo e você poderá

utiliza-lo.

5. No seu navegador digite o endereço http://localhost/phpmyadmin/.

6. No menu à esquerda selecione a opção “New” para criar um novo banco de dados,

conforme demonstrado na Figura 1:

4

Figura 1 – painel phpmyadmin

Fonte: Elaborada pelo autor.

7. Vamos criar um banco de dados com o nome “woocommerce_db”:

Figura 2 – criação da base de dados

Fonte: Elaborada pelo autor.

8. Agora abra o navegador e digite o endereço http://localhost/woocommerce.

9. Siga os passos da instalação:

a. Lembre-se de inserir o nome correto do banco de dados apenas criado:

“woommerce_db”;

b. O usuário do banco de dados costuma ser “root” por default, e a senha costuma

ficar vazia;

c. Insira o título do site, usuário e senha à sua escolha;

10. Terminada a instalação, acesse o painel, conforme sugerido, utilizando o usuário e senha

escolhidos.

11. Acesse o menu “Plugins > Adicionar novo” e pesquise por “WooComerce”.

5

Figura 3 – instalação plugins

Fonte: Elaborada pelo autor.

12. Selecione a opção “Instalar agora” e, após instalado, selecione a opção “Ativar”;

13. Insira os detalhes da loja, escolha um setor onde sua loja irá operar, os tipos de produtos e

uma quantidade aproximada de produtos que sua loja irá vender.

14. Clique em continuar e aguarde.

15. Assim que o painel administrativo reaparecer, selecione a opção “WooCommerce”:

a. Insira pelo menos 3 novos produtos:

i. Insira um nome para o produto;

ii. Insira um descrição para o produto;

iii. Insira um preço para o produto;

iv. Insira a quantidade em estoque;

v. Insira as dimensões (importante para serviços de cálculo de frete);

vi. Insira pelo menos uma imagem;

vii. Clique em Publicar;

b. Crie pelo menos 1 nova categoria:

i. Dê um nome e um slug (nome que aparecerá na URL)

ii. Insira uma imagem;

iii. Insira uma descrição breve;

c. Defina um método de Pagamento, uma sugestão é selecionar a opção “Começar a

Usar” do método de pagamento “PayPal”:

i. Aguarde a instalação;

6

ii. Selecione a opção “Test payments wth PayPal sandbox” ou simplesmente

selecione a opção “Activate PayPal” se desejar;

iii. Insira as informações requeridas;

(Para voltar ao passo a passo, basta selecionar o menu “WooCommerce”)

d. Habilite o meio de pagamento PayPal e/ou outros.

e. Na opção adicionar taxas, escolha “Eu não combro impostos sobre vendas”.

f. Adicione custos à sua entrega, i.e.: 5 reais.

g. Adicione uma logo.

16. Personalize sua página inicial.

17. Teste a aplicação.

Figura 4 – Resultado [1]

Fonte: Elaborada pelo autor.

Figura 5 – Resultado [2]

Fonte: Elaborada pelo autor.

7

Checklist:

1. Aquisição e inicialização do aplicativo Xampp;

2. Criação do banco de dados da loja;

3. Download e instalação do framework wordpress;

4. Instalação do plugin woocommerce;

5. Criação de nova loja;

6. Configuração básica da loja;

7. Estilização da página principal (home page).

8. Testar o resultado inicializando o Apache.

RESULTADOS

Resultados da aula prática:

É esperado que o aluno ao término da prática saiba configurar uma loja WooCommerce e entregue

um conjunto de pastas na estrutura do WordPress: serão os arquivos presentes na pasta

woocommerce dentro de C:/Xampp/htdocs/. Não se esqueça de realizar todos os passos do

exercício e adicionar características necessárias para a visualização da sua loja. Importar um script

(.sql) com os dados referentes ao banco de dados woocommerce_db