Lição 7: Intro to App Lab

Grades 6-8 | Grades 9-12

Visão Geral

Tutorial Summary: This tutorial is designed to quickly introduce the App Lab programming environment as a powerful tool for building and sharing apps. The tutorial itself teaches students to create and control buttons, text, images, sounds, and screens in JavaScript using either blocks or text. At the end of the tutorial students are given time to either extend a project they started building into a "Choose Your Own Adventure", "Greeting Card", or "Personality Quiz" app. They can also continue on to build more projects featured on the code.org/applab page.

Age Appropriateness: The tutorial is designed for students over 13. Because it allows students to upload custom sounds and images, young students should not use this without supervision. To protect students privacy, if your students are under 13, they will not be able to use this tutorial unless you first set up accounts for them in a section you manage.

Checking Correctness: This tutorial will not tell students whether they completed the level correctly. Encourage students to use the target images and directions provided in every level to know if they are on the right track. If students want to move on past a particularly tricky level they can simply click "Finish" and continue on.

Have fun completing your Hour of Code with App Lab!

Propósito

This lesson is your students' first step with App Lab. The tutorial itself should be an approachable introduction to a powerful tool with broad functionality. Students should have a positive experience during the tutorial and more importantly should be motivated to keep building in App Lab. They are only scratching the surface of what the tool is capable of here, so afterwards they should use the code.org/applab page or the project gallery to get inspired for more complex types of projects they want to make.

Agenda

Aquecimento

Atividade

Encerramento

Objetivos

Os estudantes serão capazes de:

Criar e compartilhar seus próprios aplicativos no App Lab usando recursos como botões, textos, imagens, sons e telas.
Continuar criando projetos no App Lab completo usando os recursos fornecidos na página code.org/applab.

Preparação

One Week Before Your Hour of Code

Review the Hour of Code Educator Guide and Best Practices from Successful Educators in order to begin to plan your Hour of Code event.
Register your Hour of Code event if you’d like to receive swag or classroom support.
Review and complete the online tutorial yourself
Be sure to test it first before asking your students to complete it. Check your technology and decide if you need to troubleshoot anything in advance of your Hour of Code.

One Day Before Your Hour of Code

Print one or more of the Exit Ticket examples at the end of this lesson plan, or create your own.
Each student who completes the activity should receive a certificate. Print one for everyone in advance to make this easier at the end of your Hour of Code.

Suporte

Relatar um Bug

Guia de Ensino

Aquecimento

Desperte o entusiasmo!

Motive: explique aos alunos os objetivos da atividade de hoje. Eles vão começar a usar uma nova ferramenta que vai permitir a criação rápida de aplicativos que podem ser instantaneamente enviados e, então, utilizados por eles mesmos ou pelos amigos.

Vídeo: o primeiro nível desta atividade é um vídeo que deve motivar os alunos a concluir a atividade e explicar como funciona. Avalie a possibilidade de assistir com a turma e, em seguida, fazer uma breve sessão para esclarecimento de dúvidas.

Atividade

Apoio geral

Apoio geral: como professor, sua principal função é apoiar os alunos conforme avançam no tutorial. Aqui vão algumas dicas que devem ajudar os alunos, seja qual for o nível em que estiverem trabalhando.

Colabore com colegas ao lado: estimule os alunos a se comunicarem com um colega ao lado quando não conseguirem avançar. Como este tutorial inclui vídeos e talvez os alunos estejam usando fones de ouvido, é fácil se isolar. Ajude a superar essas barreiras de maneira proativa, formando duplas com os alunos, caso pareça que precisam de ajuda.
Leia as instruções: as instruções costumam apresentar dicas úteis sobre como concluir o nível. Antes de terminar um nível para um aluno, assegure-se de que ele realmente tenha analisado com atenção a imagem desejada e lido todo o texto.
Não consegue avançar? Clique aqui: cada nível inclui um GIF que mostra exatamente como completar o nível. Se os alunos quiserem ajuda, eles podem e devem usar esses GIFs. Se eles quiserem usá-los apenas como uma dica, basta pedir que fechem o GIF assim que tiverem visto a primeira parte.
Siga adiante e volte: às vezes, pode ser mais proveitoso para os alunos voltar a um nível complicado. Com exceção do modo “Design”, todos os níveis são independentes um do outro, apesar de dependerem em algum grau de conceitos introduzidos anteriormente.

Definição de propriedades – níveis 1 a 4

O objetivo destes níveis é aprender a usar o bloco “setProperty()” (definirPropriedade). As listas suspensas desse bloco facilitam saber exatamente o que ele é capaz de alterar. Dito isto, há algumas dicas que podem ajudar.

Quando usar aspas duplas: o bloco “setProperty ()” altera automaticamente a lista suspensa final quando selecionamos quais propriedades desejamos alterar, inclusive o uso de aspas duplas. Em caso de dúvida, os alunos primeiro devem alterar as duas primeiras listas suspensas e, então, usar a última como modelo de quais valores funcionam ali. O erro mais comum é não usar aspas duplas antes e depois do nome de uma cor.
Passe o mouse para ler os IDs: ao passar o mouse sobre um elemento do aplicativo, podemos ler seu ID (identificador). Isso ajuda os alunos quando eles estiverem tentando alterar vários elementos da tela.

Torne interativo – níveis 5 a 7

Esta sequência apresenta o bloco “onEvent()”. Aqui vão algumas dicas úteis se os alunos não conseguirem avançar.

Os onEvents não vão um dentro do outro: os alunos iniciantes podem tentar colocar um bloco dentro do outro. Esse nunca é o comportamento esperado neste tutorial. Embora isso seja mencionado nos vídeos, um lembrete rápido pode ajudar as crianças a superarem dificuldades.
Verifique seus IDs: você precisa alterar a propriedade “id” em “onEvent()” para que ele detecte eventos com o elemento correto.
Você pode usar vários blocos em um “onEvent()”: se você quiser que várias coisas aconteçam ao clicar no mesmo botão, basta adicionar mais blocos ao mesmo “onEvent()”. Você nunca deve ter um programa com dois blocos “onEvent()” para a combinação de um elemento (por exemplo: “button1”) e um tipo de evento (por exemplo: “click”).

[][0]

[][1]

Como encontrar imagens: os alunos não precisam pesquisar imagens ou sons on-line para concluir esta lição, mas talvez queiram. Provavelmente você vai precisar se preparar com antecedência para dar recomendações de como pesquisar imagens de maneira responsável e adequada.

[/][1]

Imagens e sons – níveis 8 e 9

Esta seção tem apenas um nível em que os alunos devem colocar um animal em uma soundboard (mesa de som virtual). Este nível é um pouco mais intrincado que o anterior, portanto saiba que os alunos talvez precisem assistir ao vídeo com antecedência ou ler as instruções com atenção para concluir todos os passos.

Uso de “setProprety()” com imagens: para adicionar uma imagem a um elemento da tela, os alunos podem usar a propriedade “image”. Não há nenhum bloco novo.
Link para imagens: os alunos podem copiar a URL das imagens que encontrarem diretamente no bloco “setProperty()” para adicioná-las aos seus aplicativos. Não há necessidade de baixá-las no computador e carregá-las no App Lab, se não quiserem.

Modo Design – Níveis 10 a 13

Na última sequência, os alunos trabalham no mesmo projeto por três níveis seguidos. Agora eles vão aprender a adicionar elementos de tela sozinhos, o que significa que o total de coisas que podem fazer no App Lab cresceu muito. Presuma que, neste momento, alguns alunos vão passar um tempo explorando, conforme experimentam todas as novas ferramentas.

Uso de bons IDs: uma parte importante da programação no App Lab é colocar bons IDs (identificações) nos seus elementos. Até esta seção, os alunos receberam seus IDs já criados, então não tiveram a chance de praticar essa habilidade. Esse é um lembrete útil para o professor reforçar durante esta seção.

Compartilhe seu aplicativo – Níveis 14 e 15

Esta seção é muito aberta. O tutorial em si foi feito para dar aos alunos tempo suficiente para que continuem trabalhando neste projeto, seja criando algo em “Choose Your Own Adventure” (Escolha sua própria aventura), seja criando algo por conta própria.

Teste os exemplos: os alunos recebem três exemplos de aplicativos que devem ajudá-los a pensar nas suas próprias ideias.
Estimule o compartilhamento: se os alunos tiverem um celular com plano de dados, eles poderão enviar rapidamente um link para seus projetos para o próprio telefone ou para um amigo. Se a política da escola permitir, estimule-os a fazer isso nesta atividade.
Estimule a criatividade: em comparação com outras atividades desta lição, esta seção pede aos alunos que sejam muito mais criativos. Peça aos alunos que pensem “sobre o que será sua história?” ou façam uma breve sessão de levantamento de ideias em grupo, para que os colegas troquem ideias.

Encerramento

Comemore e continue!

Imprima certificados: [Print certificates][0] para que os alunos comemorem sua conquista.

code.org/learn: no final da lição, estimule os alunos a acessarem Code.org/learn, onde poderão ver ideias de outras formas de continuar sua aventura com a ciência da computação.