- Analise os diferentes componentes que você pode usar em App Inventor ou Thunkable
- Encontre um componente que possa ajudar o aplicativo
- Pesquise um tutorial e programe pelo menos um componente em seu aplicativo
Estas são as atividades para esta lição:
COMPONENTES DO CELULAR
É hora de escolher e programar os componentes, alguns dos quais incluem sensores, que você deseja que seu aplicativo use. Os vários componentes disponíveis permitirão que seu aplicativo faça muitas coisas diferentes - certifique-se de escolher os que são adequados para você!
Esta lição é uma referência para você aprender sobre muitos componentes que podem ser usados em seu aplicativo.
Você provavelmente já escolheu sua plataforma, mas listaremos todos os componentes para App Inventor e Thunkable, para que você possa conhecer os componentes disponíveis.
Procure os componentes que você pode usar para implementar os recursos que planejou para o seu aplicativo.
LISTA DE COMPONENTES POR CATEGORIA
Os componentes a seguir estão além do padrão componentes da interface do usuárioque permitem que o usuário interaja com o aplicativo.
Esta não é uma lista completa, mas abrange a maioria dos componentes disponíveis atualmente. O Thunkable e o App Inventor continuam a adicionar mais recursos e componentes o tempo todo.
As informações abaixo também estão disponíveis neste documento.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Permite que o usuário grave vídeos. Você pode usá-lo em aplicativos sociais, aplicativos de compartilhamento de vídeo ou em qualquer outro momento em que queira que o usuário grave um vídeo. | Camcorder | Câmera |
| Permite que o usuário tire fotos. Isso pode ser útil para aplicativos que permitem que os usuários definam fotos de perfil ou tirem fotos para compartilhar ou salvar em uma galeria. | Câmera | Câmera |
| Permite que o usuário escolha uma imagem de sua biblioteca de fotos. Isso permitirá que os usuários escolham fotos que tenham tirado fora do uso do aplicativo. | ImagePicker | Files ou Arquivos (biblioteca de fotos) |
| Permite que você incorpore um vídeo no aplicativo no qual o usuário pode clicar. O vídeo deve ser um .wmv, .3gp ou .mp4 e não deve ter mais de 1 MB. | VideoPlayer | Vídeo |
| Permite que você traduza o texto para outro idioma. Requer que seu aplicativo tenha acesso à Internet, pois depende de serviços de tradução externos. | Translator (Tradutor) | Speech |
| Permite que o usuário grave um som ou ruído. | SoundRecorder (Gravador de som) | Som |
| Esse componente de áudio reproduz um som. Isso funciona melhor para sons "longos", como músicas, discursos ou poemas. O Thunkable tem apenas um componente, Sound, para qualquer comprimento de áudio. | Player | Som |
| Muito semelhante ao componente Player, mas é melhor para sons curtos, como "dings" de notificação. | Som | Som |
| Traduz a fala do usuário em texto. Isso é especialmente útil para aplicativos que exigem recursos de viva-voz. | SpeechRecognizer (Reconhecimento de fala) | Speech |
| Esse componente faz o inverso do SpeechRecorder (Gravação de fala); ele permite que os usuários insiram o texto e o aplicativo o lerá em voz alta. | TextToSpeech (Texto para Fala) | Speech |
| Você pode reproduzir uma animação JSON em seu aplicativo. | Não disponível | Animação |
Se você precisar que seu aplicativo faça chamadas telefônicas, envie e-mails, mensagens de texto e compartilhe determinados tipos de informações, esses componentes sociais podem ser úteis.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Exibe os contatos do usuário e permite que os usuários escolham alguém dessa lista. | ContactPicker (Selecionador de contatos) | Não disponível |
| Permite que o usuário insira um endereço de e-mail da lista de contatos do usuário. | EmailPicker (Selecionador de email) | Não disponível |
| Permite que o usuário escolha um número de telefone de uma lista de contatos telefônicos. | PhoneNumberPicker (Selecionador de número de telefone) | Não disponível |
| Permite que você incorpore um vídeo no aplicativo no qual o usuário pode clicar. O vídeo deve ser um .wmv, .3gp ou .mp4 e não deve ter mais de 1 MB. | VideoPlayer | Vídeo |
| Permite que o usuário faça uma chamada telefônica a partir do seu aplicativo. | PhoneCall (Chamada telefônica) | Share (Compartilhar) |
| Permite que o usuário envie uma mensagem de texto para o telefone de outro usuário por meio do seu aplicativo. | Texting (Mensagens de texto) | Share (Compartilhar) |
| Esse componente de áudio reproduz um som. Isso funciona melhor para sons "longos", como músicas, discursos ou poemas. O Thunkable tem apenas um componente, Sound, para qualquer comprimento de áudio. | Player | Som |
| Permite que os usuários compartilhem mensagens, imagens ou outro conteúdo do seu aplicativo com outros aplicativos no telefone do usuário, como e-mail e mensagens. | Compartilhamento | Share (Compartilhar) |
| Permite a comunicação entre seu aplicativo e o Twitter/X. Os usuários podem pesquisar tweets, enviar e receber mensagens, obter uma lista de seguidores e muito mais. | Não disponível | |
| O Thunkable permite que você adicione anúncios ao seu aplicativo. Todos os aplicativos devem ser aprovados pela Thunkable antes de serem baixados ou publicados. | Não disponível | Ads (Anúncios) |
Esses componentes permitem que seu aplicativo interaja com entidades fora dele, como a Web, dispositivos e outros aplicativos.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Permite que o seu aplicativo inicie outros aplicativos, como Câmera ou Google Maps, ou aplicativos criados pelo usuário instalados no telefone. | ActivityStarter (Iniciar Atividade) | Abrir link (Bloco de controle) |
| Permite que você incorpore um mapa ao seu aplicativo. O site App Inventor inclui componentes como Marcadores e Formas que podem ser adicionados a um mapa. Esses recursos são adicionados em código no Thunkable. | Maps (Mapa) | Maps (Mapa) |
| Permite que os usuários visualizem páginas da Web em seu aplicativo. | WebViewer (Visualizador da Web) | Visualizador da Web |
| Permite que seu aplicativo envie e obtenha informações de e para sites externos. | Web | Web API |
| Permite que o usuário faça uma chamada telefônica a partir do seu aplicativo. | PhoneCall (Chamada telefônica) | Share (Compartilhar) |
| Esses componentes permitem que seu aplicativo se conecte a dispositivos Bluetooth. | Cliente Bluetooth, Servidor Bluetooth, BlueToothLE (extensão) | Bluetooth Low Energy |
| Esse componente de áudio reproduz um som. Isso funciona melhor para sons "longos", como músicas, discursos ou poemas. O Thunkable tem apenas um componente, Sound, para qualquer comprimento de áudio. | Player | Som |
| Usado para coletar dados de fontes externas (sensores, web, arquivos de dados) e exibi-los em forma de gráfico. | Gráfico, ChartData2D | Não disponível |
| Pode ser usado para conectar-se a dispositivos seriais como o Arduino. | Serial (Em série) | Não disponível |
| Permite que os usuários do seu aplicativo se inscrevam com um nome de usuário e uma senha. Isso requer que você configure primeiro uma conta do Firebase. | Não disponível | Sign-in (Entrar) |
| Permite que você incorpore um arquivo PDF em seu aplicativo | Não disponível | PDF Reader (Leitor de PDF) |
Se o seu aplicativo precisar coletar informações sobre o mundo ao seu redor ou sobre o usuário, aqui estão alguns sensores que o App Inventor e o Thunkable podem acessar.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Pode determinar se o telefone está tremendo e se está sendo segurado na vertical ou de cabeça para baixo. Esse recurso é muito útil quando se deseja que a tela se reoriente em resposta à forma como o telefone está sendo segurado ou quando se deseja que o aplicativo reaja ao tremor. | AccelerometerSensor (Sensor do Acelerômetro) | Acelerômetro |
| Usa o sensor do acelerômetro para medir quantos passos o usuário que está segurando o telefone dá e também pode estimar a distância percorrida. | Pedômetro | Não disponível |
| Pode detectar se o telefone está sendo inclinado. Ele é mais preciso do que o acelerômetro e pode medir o quanto a orientação do telefone foi alterada. | GyroscopeSensor (Sensor de giroscópio) | Gyroscope (Giroscópio) |
| Usado para medir a densidade do fluxo magnético. Nem todos os telefones suportam esse recurso. | MagneticFieldSensor (Sensor de campo magnético) | Magnetometer (Magnetômetro) |
| Permite que seu aplicativo obtenha a hora atual ou use um cronômetro. Isso pode ser útil para definir um alarme cronometrado ou usar um cronômetro. | Clock (Relógio) | Timer (Temporizador) |
| Coleta a latitude e a longitude da localização do telefone. Esse sensor pode ser útil sempre que for necessário pesquisar pontos de interesse próximos ao usuário. | LocationSensor | Location Sensor (Sensor de localização) |
| Indica se o telefone está próximo a um objeto. Geralmente é usado para saber se o usuário está com o telefone próximo ao ouvido. Nem todos os telefones são compatíveis com esse recurso. | ProximitySensor (Sensor de proximidade) | Não disponível |
| Permite que seu aplicativo leia um código de barras. | BarcodeScanner (Leitor de código de barras) | Câmera |
| Mede a pressão do ar ambiente. | Barometer (Barômetro) | Não disponível |
| Mede a umidade relativa do ar ambiente. Pouco comum na maioria dos dispositivos móveis. | Hygrometer (Higrômetro) | Não disponível |
| Mede o nível de luz. | Sensor de Luz (LightSensor) | Não disponível |
| Permite que seu aplicativo compartilhe dados com outros dispositivos equipados com NFC (Near-field Communication). | NearField (Campo próximo) | Não disponível |
| Fornece informações sobre a orientação física do dispositivo em três dimensões: rotação, pitch e azimute. | OrientationSensor (Sensor de orientação) | Não disponível |
| Mede a temperatura ambiente (externa). | Termômetro | Não disponível |
Seu aplicativo pode armazenar dados dentro do aplicativo, no dispositivo e na nuvem com esses componentes.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Bloco que permite atualizar e armazenar informações dentro do aplicativo. Qualquer informação é apagada quando o aplicativo é fechado. | Variable (Variável) | App Variable (Variável do aplicativo) |
| Permite que seu aplicativo armazene e atualize informações localmente no dispositivo móvel e as use dentro do aplicativo. Os dados podem ser armazenados e recuperados entre as execuções do aplicativo. No Thunkable, o DataViewer (Visualização de Dados) e o DataViewerGrid (Visualização de Dados do tipo Grade) podem armazenar dados localmente usando a opção "Create your own Table" (Criar sua própria tabela). | TinyDB | stored Variable DataViewer (Visualização de dados de variáveis armazenadas) List Data Viewer Grid (Grade de Visualização de Dados da Lista) |
| Permite que seu aplicativo armazene, recupere e atualize dados na nuvem para que os dados possam ser compartilhados entre diferentes usuários do aplicativo. O Thunkable oferece variáveis de nuvem usando o Firebase. O DataViewer (Visualização de Dados) e o DataViewerGrid (Visualização de Dados do tipo Grade) podem ser vinculados ao Airtable, ao Google Sheets e ao Webflow. O componente Spreadsheet (Tabela) do App Inventor é vinculado ao Google Sheets (Google Tabelas). | CloudDB
FirebaseDB
Spreadsheet (Planilha) |
cloud Variable (variável de nuvem) - (Firebase)
DataViewer List (Lista de visualização de dados) DataViewerGrid (Grade de visualização de dados) |
Use modelos de aprendizado de máquina para classificação e ferramentas de IA generativas em seu aplicativo.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Permite a comunicação com um bot de bate-papo de IA, o ChatGPT da OpenAI. | Chatbot | Open AI services (Serviços da Open AI) (preenchimento de texto) |
| Permite que você inclua o DALL-E em seu aplicativo para criar e editar imagens. | Imagebot (Bot de imagem) | Open AI services (Serviços da Open AI) (geração de imagens) |
| Permite que você crie seu próprio modelo de aprendizado de máquina (imagem, som, pose) e use-o em seu aplicativo. | PersonalImageClassifier (classificador de imagem pessoal) PersonalAudioClassifier (classificador de áudio pessoal) PoseNetExtension TeachableMachine (observe que todos eles exigem que você adicione a extensão) |
Não disponível |
Habilite desenho em um aplicativo e adicione sprites, animações para animar e criar jogos.
| Descrição do recurso | App Inventor | Thunkable |
|---|---|---|
| Adiciona uma área na tela onde os usuários podem desenhar. Também é aqui que você pode adicionar sprites que podem ser animados. | Canvas | Canvas |
| Esses componentes são os elementos que podem ser animados e interagidos em um jogo ou animação | ImageSprite Ball (Bola) |
Sprite |
Você adicionará componentes na janela Designer do Thunkable. Você pode procurar um componente digitando seu nome.
Na nova versão de arrastar e soltar do Thunkable, todos os componentes não visíveis serão encontrados na guia Blocks (Blocos), e não no Designer. Portanto, se estiver procurando por componentes e não conseguir encontrá-los, tente procurá-los na guia Blocks.
ATIVIDADE: APRENDA UM NOVO COMPONENTE
Tempo estimado: 60 minutos
Escolha um componente para aprender sobre
- Escolha pelo menos um componente ou sensor que você acha que usará em seu aplicativo.
- Encontre a documentação e/ou um tutorial para usar o componente em um aplicativo. Você pode começar aqui:
- Programe um aplicativo usando esse novo componente
Dica de mentores(as)
Melhores práticas: O componente que você escolher não precisa ser perfeito para o seu aplicativo! Desde que você esteja aprendendo sobre um novo componente, isso é o que importa. Basta escolher algo que você acha que pode funcionar e, se descobrir que não funciona, não tem problema. No mundo do programação, chamamos essa pesquisa de "spike" porque você está tentando cavar o mais fundo possível rapidamente (como se estivesse batendo uma marreta no chão).
Perguntas orientadoras a serem feitas para estudantes: Se estivéssemos criando um aplicativo para um Apple watch, que tipo de componentes poderiam estar no Apple Watch? (monitor de frequência cardíaca, giroscópio - para rastreamento de passos, bluetooth). Quantos dados você está coletando? Você poderia usar esses dados para treinar seu modelo de IA?
As dicas são fornecidas com o apoio do AmeriCorps.
Uma das melhores habilidades que você pode aprender como programadora é como encontrar recursos que te ajudem quando você estiver presa ou precisar aprender a usar algo.
Essa atividade é prática!
Ele pode não estar exatamente alinhado com o aplicativo que você deseja criar, mas a prática da programação com componentes ajudará quando você for criar seu próprio aplicativo.
REFLEXÃO
Esta lição é uma referência para todos os componentes que você pode usar para criar um aplicativo. Encontrar um tutorial ou documentação para aprender a usar seu componente não é fácil!
REVISÃO DOS PRINCIPAIS TERMOS
- Componentes da interface do usuário - componentes padrão com os quais um usuário interage, como botões, rótulos e caixas de texto
- Componentes de mídia - Exemplos de componentes de mídia são fotos, áudio e vídeo.
- Sensores - diferentes tipos de dispositivos instalados em um telefone que coletam dados para várias finalidades
- Componentes sociais - recursos que permitem aos usuários fazer chamadas telefônicas, enviar e-mails, mensagens de texto e compartilhar coisas por meio do seu aplicativo
- Componentes de conectividade - recursos que permitem que seu aplicativo interaja com locais fora dele, como a Web e outros aplicativos
- Componentes de armazenamento - blocos e componentes que permitem armazenar informações no aplicativo, no dispositivo e na nuvem
- Componentes de IA - componentes que permitem que você use modelos de aprendizado de máquina ou ferramentas de IA generativas em seu aplicativo
RECURSOS ADICIONAIS
Outros sites de tutoriais úteis para o Thunkable
- draganddropcode.com
- Canal do Youtube do Thunkable
- Curso de Thunkable na Udemy, ministrado por Meenakshi Nair, ex-aluna do Technovation
Recursos gerais
- GirlsCodeIt Tutoriais do Technovation
- Lista completa de referências de componentes (Documento do Google para impressão)
