O documento apresenta um cronograma de um curso introdutório sobre a plataforma Thunkable para desenvolvimento de aplicativos móveis. O cronograma inclui 7 dias de aulas práticas ensinando conceitos básicos como criação de telas, botões, imagens, som e integração com câmera e mapas. Também mostra como testar apps em emuladores e dispositivos reais.
2. Cronograma
Day 1 | Terça 06.02
Why Thunkable?
Hands On | My First Android App
Features
App 2
Emulador GenyMotion
DAY 3 | Quinta 08.02
App 7
Hands On | My First iOS App
Maneiras de Testar seu App iOS
Help
Tutoriais
Day 2 | Quarta 07.02
App 3
App 4
Maneiras de Testar seu App Android
Menu ‘Apps’
App 5
App 6
5. Why Thunkable?
Thunkable é simples e rápido para desenvolvedores de app iniciantes, mas
poderoso o suficiente para suportar seus apps mais ambiciosos.
Chris de Pelegrin | christiane.bdp@gmail.com
6. Why Thunkable?
Você quer construir seus próprios apps?
Mas não sabe como programar?
Tente THUNKABLE!
Com Thunkable QUALQUER UM pode
construir um app!
Simplesmente escolha os ELEMENTOS E
FUNÇÕES que você quer.
ARRASTE e SOLTE diretamente para seu app!
Então você está PRONTO para LANÇAR!
Chris de Pelegrin | christiane.bdp@gmail.com
9. Hands On | My First Android App
Mãos na massa pra CRIAR SEU PRIMEIRO APP ANDROID no
Thunkable e INSTALAR NO SEU DEVICE.
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Botão
● Acelerômetro
● Blocos de programação
● Listas
● Blocos Mutantes
13. Hands On | App 2
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Criar novas telas
● Navegar entre as telas
● Mudar o nome do app e o ícone
● Imagem
● Legenda
● Entrada de texto
● Notifier
● Text-to-Speech
● Controle if-then
15. GenyMotion
Crie uma conta no site e baixe a versão
Trial.
Instale e quando abrir pela primeira vez,
clique em Personal Use.
Aceite os Termos e clique em Close na
próxima janela após os termos.
Chris de Pelegrin | christiane.bdp@gmail.com
16. GenyMotion
Você ainda não tem um virtual device,
vamos adicionar uma? YES
Chris de Pelegrin | christiane.bdp@gmail.com
17. GenyMotion
É preciso logar para ter acesso aos
virtual devices disponíveis.
Clique em Sign in.
Chris de Pelegrin | christiane.bdp@gmail.com
18. GenyMotion
Informe o usuário e senha que criou no
site do GenyMotion.
Chris de Pelegrin | christiane.bdp@gmail.com
19. GenyMotion
Agora podemos criar uma virtual
device.
Podemos usar a segunda opção da
lista: Custom Phone - 4.1.1
Clique em Next até a nova virtual
device ser criada. Clique em Finish
para concluir.
Chris de Pelegrin | christiane.bdp@gmail.com
20. GenyMotion
Agora clique em Start para iniciar a
virtual device.
Chris de Pelegrin | christiane.bdp@gmail.com
23. Hands On | App 3
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Colocar imagem no botão
● Reproduzir som (sound)
https://thunkable.com/apptutorial2/goat_sound.m4a
25. Hands On | App 4
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Desenhar linhas e pontos com canvas
● Mudar a cor do desenho usando botões
● Apagar o desenho usando botão e o acelerômetro
● Layout de tabela
26. Maneiras de Testar seu App Android
App (provide QR code for .apk)
Clique nesta opção e aguarde o QR Code ser gerado.
Use qualquer leitor de QR Code, leia o código e
aguarde o aplicativo ser baixado.
Instale o app e pronto!
*As configurações de segurança do seu device
devem permitir a instalação de apps de fontes
desconhecidas.
*Sempre que alterar algo no app, você precisa gerar
o apk novamente para instalar a versão atualizada.
Chris de Pelegrin | christiane.bdp@gmail.com
27. Maneiras de Testar seu App Android
App (save .apk to my computer)
Clique nesta opção e aguarde o apk ser baixado em seu
computador.
Abra o emulador GenyMotion e inicie sua virtual
device.
Arraste o apk para dentro dela e aguarde a execução do
app.
Se preferir executar em seu device, transfira o apk para
ele por cabo USB, Bluetooth a maneira que preferir.
*Sempre que alterar algo no app, você precisa gerar o
apk novamente para instalar a versão atualizada. Chris de Pelegrin | christiane.bdp@gmail.com
28. Maneiras de Testar seu App Android
Thunkable Live
Conecte seu device e seu computador na
mesma rede wi-fi.
Baixe em seu device o aplicativo
Thunkable.
Clique no menu Test > Thunkable Live
Leia o QRCode com o app que acabou de
baixar.
Veja o seu aplicativo funcionando em
tempo real!
Chris de Pelegrin | christiane.bdp@gmail.com
29. Maneiras de Testar seu App Android
USB Connection
*A maneira mais trabalhosa!
Baixe em seu device o aplicativo
Thunkable.
Instale o software USB compatível com o
SO do seu computador.
Habilite o modo Debugging em seu
device.
Conecte seu device no seu computador
através de um cabo USB.
Clique no menu Test > USB Connection Chris de Pelegrin | christiane.bdp@gmail.com
Veja o seu aplicativo funcionando em tempo real!
Mais detalhes em:
https://docs.thunkable.com/android/live-test-usb.html
34. Hands On | App 6
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Tirar uma foto usando a câmera do celular
● Armazenar a foto no banco de dados local tinyDB
● Recuperar a foto do banco de dados
37. Hands On | App 7
Chris de Pelegrin | christiane.bdp@gmail.com
O que a gente vai aprender?
● Google Maps
38. Respostas para algumas perguntas...
COMO FAZER SPLASH SCREEN? Aquela tela inicial do aplicativo.
Use um timer pra fechar a splash screen depois de um determinado tempo:
Set a Timer (to Turn Off a Splash Screen)
https://docs.thunkable.com/android/components/sensors/clock.html
O QUE É A PROPRIEDADE SPRITE DO CANVAS?
Sprites são elementos que se movem, como uma bola (que pode reagir a toques e serem arrastados, interagir
com outros sprites e com a borda da tela). Sprites podem ser feitos com um Image Sprite ou Ball (encontre
no menu Drawing & Animation).
39. Respostas para algumas perguntas...
A diferença entre um Image Sprite e uma Ball é que um Image Sprite pode ter sua aparência definida a partir
de um arquivo de imagem, enquanto a aparência de uma Ball só pode ser alterada variando suas
propriedades PaintColor e Radius.
https://docs.thunkable.com/android/components/gaming/image-sprite.html#styling-the-ball
Sendo assim, a propriedade draggedAnySprite do Canvas, indica se um sprite (Image Sprite ou Ball) foi
arrastado dentro do canvas.
40. Respostas para algumas perguntas...
DÁ PRA CHAMAR DIRETO A CÂMERA FRONTAL?
Me parece que não é possível chamar a câmera frontal direto pelo Thunkable. Pesquisei bastante e até o
momento nenhuma das duas plataformas (Thunkable ou App Inventor) tem suporte pra isso.
43. Hands On
Mãos na massa pra CRIAR SEU PRIMEIRO APP
iOS no Thunkable e INSTALAR NO SEU DEVICE
Chris de Pelegrin | christiane.bdp@gmail.com
44. Maneiras de Testar seu App iOS
Live Test: executa o app no seu device (é preciso
instalar o app Thunkable no seu device iOS).
Share: gera um link, se alguém acessar o link,
recebe uma cópia do seu projeto.
Download: envia o instalador do aplicativo para o
endereço de e-mail que você informar.
Publish: envia seu app direto para publicação na
Apple Store (requer ter conta de desenvolvedor).
47. Christiane Barbieri de Pelegrin
Engenheira de Computação
Trabalha como voluntária para o projeto Technovation Challenge (o maior desafio do
mundo de empreendedorismo e tecnologia só para meninas) da ONG Iridescent dos
Estados Unidos, sediada na Vale do Silício.
Como embaixadora do projeto, começou a trabalhar com plataformas de desenvolvimento de
apps amigáveis (como App Inventor e Thunkable) para ensinar as meninas que participam
deste projeto aqui na região a desenvolverem seus próprios aplicativos.