Diferentes componentes no App Inventor

  • Analise os diferentes componentes que você pode usar no App Inventor ou no Thunkable
  • Encontre um componente que possa ajudar o app
  • Pesquise um tutorial e codifique pelo menos um componente em o app

Estas são as atividades para esta lição:

COMPONENTES celular

É hora de escolher e codificar os componentes, alguns dos quais incluem sensores, que você deseja que o app use. Os vários componentes disponíveis permitirão que o app faça muitas coisas diferentes - certifique-se de escolher os mais adequados para você! 

Esta lição é uma referência para você aprender sobre muitos componentes que podem ser usados em o app. 

Provavelmente, você já escolheu sua plataforma, mas listaremos todos os componentes do App Inventor e do 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 o app.

girls looking at laptop

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 App Inventor continuam a adicionar mais recursos e componentes o tempo todo.

As informações abaixo também estão disponíveis neste documento.

Se o app precisar de recursos relacionados a coisas como fotografias, áudio e vídeo, esses componentes serão muito úteis para você.
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. Câmera de vídeo 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 o app. ImagePicker 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 traduzir textos para outro idioma. É necessário que o app tenha acesso à Internet, pois depende de serviços de tradução externos. Tradutor Discurso
Permite que o usuário grave um som ou ruído. 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. Jogador 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. Reconhecimento de fala Discurso
Esse componente faz o inverso do SpeechRecorder; ele permite que os usuários insiram o texto e o aplicativo o lerá em voz alta. TextToSpeech Discurso
Você pode reproduzir uma animação JSON em o app. Não disponível Animação
Se você precisa de o app para fazer chamadas telefônicas, enviar e-mails, mensagens de texto e compartilhar 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. Seleção 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 Não disponível
Permite que o usuário escolha um número de telefone de uma lista de contatos telefônicos. PhoneNumberPicker 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 o app. Chamada telefônica Compartilhar
Permite que o usuário envie uma mensagem de texto para o telefone de outro usuário por meio de o app. Mensagens de texto 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. Jogador Som
Permite que os usuários compartilhem mensagens, imagens ou outros conteúdos em o app com outros aplicativos no telefone do usuário, como e-mail e mensagens. Compartilhamento Compartilhar
Permite a comunicação entre o app e o Twitter. Os usuários podem pesquisar tweets, enviar e receber mensagens, obter uma lista de seguidores e muito mais. Twitter Não disponível
A Thunkable permite que você adicione anúncios a o app. Todos os aplicativos devem ser aprovados pela Thunkable antes de serem baixados ou publicados. Não disponível Anúncios
Esses componentes permitem que o app o app interaja com entidades fora dele, como a Web, dispositivos e outros aplicativos.
Descrição do recurso App Inventor Thunkable
Permite que o app inicie outros aplicativos, como Câmera ou Google Maps, ou aplicativos criados pelo usuário instalados no telefone. ActivityStarter Abrir link (Bloco de controle)
Permite que você incorpore um mapa em o app. App Inventor inclui componentes como Markers e Shapes 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 o app. WebViewer Visualizador da Web
Permite que o app envie e obtenha informações de e para sites externos. Web API da Web
Permite que o usuário faça uma chamada telefônica a partir do o app. Chamada telefônica Compartilhar
Esses componentes permitem que o app 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. Jogador 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. Em série Não disponível
Permite que os usuários do o app 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 Entrar
Permitir que você incorpore um arquivo PDF em o app Não disponível Leitor de PDF
Se o app precisar coletar informações sobre o mundo ao seu redor ou sobre o usuário, aqui estão alguns sensores que 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. AcelerômetroSensor 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 Giroscópio
Usado para medir a densidade do fluxo magnético. Nem todos os telefones suportam esse recurso. Sensor de campo magnético Magnetômetro
Permite que o app obtenha a hora atual ou use um cronômetro. Isso pode ser útil para definir um alarme cronometrado ou usar um cronômetro. Relógio 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 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 Não disponível
Permite que o app leia um código de barras. Leitor de código de barras Câmera
Mede a pressão do ar ambiente. Barômetro Não disponível
Mede a umidade relativa do ar ambiente. Pouco comum na maioria dos dispositivos móveis. Higrômetro Não disponível
Mede o nível de luz. LightSensor Não disponível
Permite que o app compartilhe dados com outros dispositivos equipados com NFC (Near-field Communication). NearField 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 Não disponível
Mede a temperatura ambiente (externa). Termômetro Não disponível
o app pode armazenar dados dentro do opp, 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. Variável Variável do aplicativo
Permite que o app 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 e o DataViewerGrid podem armazenar dados localmente usando a opção "Create your own Table" (Crie sua própria tabela). TinyDB Variável armazenada Lista do DataViewer Grade do visualizador de dados
Permite que o app 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 e o DataViewerGrid podem ser vinculados ao Airtable, ao Google Sheets e ao Webflow. O componente Spreadsheet do App Inventoré vinculado ao Google Sheets. CloudDB FirebaseDB Planilha eletrônica variável de nuvem - (Firebase) Lista do DataViewer DataViewerGrid
Use modelos de machine learning para classificação e ferramentas de IA generativas em um o app.
Descrição do recurso App Inventor Thunkable
Permite a comunicação com um bot de bate-papo de IA, o ChatGPT da OpenAI. Chatbot Serviços abertos de IA (preenchimento de texto)
Permite que você inclua o DALL-E em o app para criar e editar imagens. Imagebot Serviços abertos de IA (geração de imagens)
Permite que você crie seu próprio modelo de machine learning (imagem, som, pose) e use-o em o app. PersonalImageClassifier PersonalAudioClassifier (classificador de áudio pessoal) PoseNetExtension TeachableMachine (máquina ensinável) (observe que todos eles exigem que você adicione a extensão) Não disponível
Habilite o desenho em um aplicativo e adicione sprites 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. Tela Tela
Esses componentes são os elementos que podem ser animados e interagidos em um jogo ou animação ImageSprite
Ball
Sprite

Você adicionará componentes na janela Designer do App Inventor. Você terá de clicar em uma categoria na paleta para abrir a gaveta e mostrar os componentes.

app inventor component palette

ATIVIDADE: APRENDER UM NOVO COMPONENTE

Tempo estimado: 60 minutos

Escolha um componente para aprender sobre

  1. Escolha pelo menos um componente ou sensor que você acha que usará em um o app.
  2. Encontre a documentação e/ou um tutorial para usar o componente em um aplicativo.
  3. Você pode começar aqui:
  4. Codifique um aplicativo usando esse novo componente

Melhores práticas: O componente que você escolher não precisa ser perfeito para o o app! 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 da programação , chamamos essa pesquisa de "espigão" porque você está tentando cavar rapidamente o mais fundo possível (mais ou menos como bater um espigão de trem no chão).

Perguntas orientadoras a serem feitas aos estudantes: Se estivéssemos criando um aplicativo para um relógio da Apple, que tipo de componentes poderiam estar no relógio da Apple (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.

stylized A, AmeriCorps logo in navy

Uma das melhores habilidades que você pode aprender como programador é como encontrar recursos que o ajudem quando você estiver preso 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 o app. Encontrar um tutorial ou documentação para aprender a usar seu componente não é fácil!

2 girls coding
Como você encontrou o tutorial ou as informações necessárias para a atividade?
Como você usará seu trabalho desta lição em o app?
Em que outra área de sua vida você pode usar essa habilidade de "encontrar seu próprio tutorial"?

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 o app
  • Componentes de conectividade - recursos que permitem que o app interaja com locais fora do o app, 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 machine learning ou ferramentas de IA generativas em o app

RECURSOS ADICIONAIS

Outros sites de tutoriais úteis para o App Inventor:

Mais recursos gerais: