Ensine uma Criança

logo do projeto ao lado do nome ensine uma criança

Um roteiro pra te ajudar a guiar o aprendizado de uma criança em tecnologia, usando Scratch.

Como contabilizar o preço de carrinho de compras usando variáveis
voltar

Próximo Cliente, Por Favor

Módulo: 1 - Mais Scratch

Atividade: 4 - Next customer please

Projeto pronto: contém spoilers


O jogo que você vai aprender a fazer hoje pode ser o início de uma ideia pra criar um sistema de mercados!

No projeto de hoje, vamos criar um catálogo de produtos que um cliente pode colocar no carrinho e comprar.

O que você vai fazer

Pra ver uma versão do jogo funcionando, acesse a página do material original na seção “What you will make” e veja os exemplos de lojas que pode criar!

Pode ser uma loja de roupa, bandeira, comidas, brinquedos, ou qualquer outra coisa que você quiser.

Quando estiver testando, tente fazer a compra antes de adicionar qualquer produto - o que acontece?

E uma reflexão antes de você começar:

❓Como vamos saber se nosso carrinho está vazio?

Uma dica: vamos usar o valor de uma variável.

Sua loja

Agora é sua vez de pensar como vai ser seu empreendimento: crie um novo projeto no Scratch e procure (ou desenhe) um cenário pra sua loja.

Pense em quais coisas podem compor o cenário:

  • um balcão?
  • um caixa?
  • uma prateleira pra colocar os itens?
  • uma vitrine?
  • um painel de preços?

E além disso, adicione também um ator que vai atender os clientes e conversar com eles.

No código desse ator, já vamos adicionar um código pra ele conversar com nosso jogador:

Quando a bandeira verde for clicada, esse ator vai chamar o próximo cliente:

Código inicial do ator vendedor

Pro meu exemplo, vou fazer uma loja de poções, e a vendedora vai ser uma bruxa!

Visualização do jogo com o cenário inicial e a bruxa chamando o próximo cliente

Itens à venda

Pra contabilizar o preço total do carrinho, vamos usar uma variável e vamos chamá-la de total.

Pra criar uma variável, vá na seção “Variáveis” de blocos e clique em Criar nova variável. Não se esqueça de selecionar para todos os atores, já que mais de um ator vai mudar o valor dessa variável.

E no código do ator vendedor, vamos adicionar o código pra sempre começar o novo cliente com o total zerado:

Bloco que zera o total adicionado no ator da bruxa

Você já pensou quais itens sua loja vai vender?

No meu exemplo, vou colocar ingredientes de poções à venda. Vou começar com um ator (Wizard Hat).

Depois de selecionar seu ator, mude a fantasia dele pra incluir uma etiqueta ou placa com o preço:

Além disso, adicione um novo som no seu ator para que ele seja tocado quando o item for selecionado. Eu vou usar o som pop em meu exemplo.

Por último, vamos fazer o código do produto. Quando clicarmos nele, ele deve adicionar o valor ao total, e emitir um som:

Código do item que será comprado

Agora, adicione mais alguns itens repetindo esse processo até que sua loja fique cheia!

Minha loja tá ficando assim:

Jogo com cenário, vendedor e produtos com preços listados

Compras

Quando o jogador terminar de comprar, ele deve clicar no vendedor pra concluir sua compra.

Primeiro, o vendedor deve dizer pro cliente quanto deu o total da compra.

Pra fazermos isso, vamos usar o bloco diga ....

Nesse bloco, só temos um espaço em branco pra colocar nosso texto. Temos a opção de colocar o total diretamente lá, mas o vendedor só falaria um número, e não a frase completa.

Nós queremos que a vendedora diga "O valor da sua compra é 50". Como podemos fazer isso, já que o valor da compra está dentro da variável (gaveta) total?

Exite um bloco chamado junte ... com ..., que serve pra grudar 2 palavras ou números um no outro.

Se juntarmos a frase "O valor da sua compra é com a variável total, a frase fica completa:

O bloco junte pra unir a frase com o conteúdo da variável

(note que há uma barra espaço no final da frase O valor da sua compra é , assim ela não fica grudada com o valor)

E o código da compra por enquanto tá assim:

Pra deixar tudo mais imersivo, quero tocar um som de máquina registradora quando a venda for concluída, então vou na aba Sons e vou adicionar o som com nome Machine no ator da bruxa.

Esse som é parecido com o de uma caixa registradora, e vamos tocá-lo com o bloco toque o som ... até o fim depois da bruxa dizer o valor da compra:

Código do clique no vendedor pra concluir a compra até agora

Mais clientes!

Por enquanto, nosso jogo só atende um cliente, e pra atender outro cliente, precisamos começar o jogo de novo clicando na bandeira verde.

O que nós queremos é que nosso jogo permita vários clientes dentro da loja. Pra isso, vamos usar um bloco que já estamos ficando acostumados em ver: transmita ....

Primeiro de tudo, vamos usar o bloco de topete quando eu receber ... e adicionar uma nova mensagem com o nome proximo cliente:

Agora, vamos refatorar uma parte do código: os blocos de mude o total para 0 e diga "Próximo cliente, por favor" que estavam antes juntos com o bloco de topete quando bandeira verde for clicada agora devem ficar abaixo do quando eu receber proximo cliente.

O bloco quando bandeira verde for clicada deve conter apenas o bloco transmita proximo cliente:

Agora, ainda no código da vendedora, depois que tocarmos o som da caixa registradora, queremos agradecer o cliente atual e depois chamar o próximo cliente com o bloco transmita:

Código final da bruxa com o transmita

Você percebeu o que fizemos com essa refatoração? Nós utilizamos o bloco transmita ... para um ator conversar consigo mesmo - isso pode parecer estranho no primeiro momento, mas posso explicar.

Em dois momentos distintos do nosso jogo, nosso vendedor faz a mesma coisa:

  1. Quando começamos o jogo, o vendedor diz "próximo cliente, por favor", e muda o valor de total para 0;
  2. Quando terminamos uma venda, o vendedor faz a mesma coisa e também mudamos total para 0;

Nós poderíamos copiar o código pra não precisar usar o transmita .... Nosso código ficaria assim:

Código da bruxa, sem refatoração

(código de exemplo, não precisa copiar)

Se quiséssemos mudar a frase que a bruxa fala, precisaríamos mudar em 2 lugares diferentes e correria o risco de esquecermos.

Pra não ter esse problema, usamos o bloco transmita ... pra “executar” o mesmo código, em momentos diferentes, sem precisar duplicá-los:

Código da bruxa, com refatoração

Esse foi um exemplo de refatoração, que é: mexer no nosso código pra deixar ele mais fácil de entender ou melhorar, sem afetar seu funcionamento.

E esse foi nosso projeto de loja! Compartilhe o link com as pessoas que você acha que vão gostar da sua loja virtual.

Um abraço e até a próxima atividade!

Início O que é Aulas ao Vivo