Aula Prática Desenvolvimento de e-commerce com CMS

Aula Prática Desenvolvimento de e-commerce com CMS

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 “xampp\htdocs\”.
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

Aula Prática Desenvolvimento de e-commerce com CMS