Um aplicativo Blockly é um aplicativo da Web que contém um editor Blockly (espaço de trabalho). Este documento mostra exemplos de uso de aplicativos Blockly e analisa recursos típicos da interface.
Se ainda não tiver feito isso, leia o glossário visual e as etapas básicas de inscrição antes de continuar com este documento.
O que os aplicativos do Blockly fazem?
Os aplicativos do Blockly ajudam os usuários a escrever programas em várias áreas, desde videogames até robótica e análise de dados. Os usuários escrevem programas usando blocos, que o aplicativo usa para gerar código baseado em texto, como JavaScript ou Python. Em seguida, o aplicativo executa o código gerado diretamente ou o usuário faz o download e executa em outra plataforma, como um robô ou controle de videogame portátil.
Confira alguns exemplos dos tipos de programas que os usuários escrevem com aplicativos do Blockly:
Soluções de quebra-cabeças, animação ou música:o código gerado resolve um quebra-cabeça (como um labirinto), mostra uma animação ou toca música. Por exemplo, consulte o Music Lab da Code.org.
Videogames:o código gerado executa um videogame. Por exemplo, crie os dois primeiros níveis de "Whack the Mole" no MakeCode Arcade (link em inglês) e faça o download do jogo para um controle ou jogue no simulador.
Robótica:o código gerado direciona um robô. Por exemplo, programe um robô com o Ozoblockly e faça o download para um robô de verdade ou execute no simulador.
Desenho:o código gerado cria um desenho 2D ou 3D. Por exemplo, consulte BlocksCAD.
Análise de dados:o código gerado analisa dados e cria um gráfico. Para ver um exemplo, consulte esta demonstração da plataforma Dialogic.
Código específico do aplicativo:o código gerado realiza uma tarefa específica de um aplicativo em particular. Por exemplo, as Ferramentas para desenvolvedores do Blockly são usadas para criar novos blocos do Blockly. Ele gera código de definição de bloco, que os usuários copiam e colam no próprio aplicativo Blockly.
Interfaces do usuário
Uma boa maneira de entender os componentes típicos dos aplicativos do Blockly é analisar as interfaces do usuário deles.
Componentes básicos de UI
Quase todos os aplicativos Blockly compartilham alguns componentes básicos: um editor Blockly (espaço de trabalho), um painel de saída e um botão "Executar". Por exemplo, esta é a interface do Maze no Blockly Games.
Alguns aplicativos do Blockly omitem o botão "Executar" e, em vez disso, atualizam o painel de saída sempre que o usuário faz uma mudança. Por exemplo, o aplicativo Gráfico nos exemplos do Blockly tem dois painéis de saída (um para o gráfico e outro para a equação) que são atualizados a cada mudança.
Alguns aplicativos não têm um painel de saída. Isso é mais comum em aplicativos de hardware, como os de programação de robôs. Embora alguns desses aplicativos incluam um simulador de hardware, muitos deles apenas permitem que os usuários façam o download e executem o código gerado diretamente no dispositivo de destino.
Outros componentes da interface
A maioria dos aplicativos tem outros componentes de UI. Algumas atendem a necessidades gerais, como salvar o trabalho do usuário, enquanto outras atendem a necessidades específicas do aplicativo, como projetar uma GUI. Veja alguns exemplos:
O Scratch, um aplicativo para criar animações e videogames, tem editores de gráficos e som, painéis para criar novos sprites e planos de fundo, além de menus de arquivo, edição e configurações:
O MakeCode Arcade, um aplicativo para criar videogames, tem controles de saída, editores de código e gráficos, um menu de configurações e botões de download e salvar. O painel de saída simula um controle de jogo portátil.
O MIT App Inventor, um aplicativo para criar apps para smartphone, tem telas separadas para o designer de GUI e o editor Blockly, além de menus de arquivo, conexão, build e configurações. Em vez de um painel de saída, os usuários testam o código gerado no smartphone.
Os componentes adicionais que você deve incluir dependem das metas do aplicativo e das habilidades dos usuários. Alguns componentes comuns são:
Administração:
- Gerenciamento de arquivos (novo, abrir, salvar, salvar como, excluir)
- Gerenciamento de contas (criar, fazer login e logout)
- Configurações (idioma, configuração da interface)
Programação:
- Editar comandos (desfazer, refazer, copiar, cortar, colar, duplicar)
- Designer de GUI
- Editores de gráficos e som
- Editor de código ou exibição de código somente leitura
Teste
- Configuração de saída (início/parada, velocidade de reprodução, volume, captura de tela etc.)
- Debugger (pontos de interrupção, execução, etapa, destaque de bloco)
- Definir parâmetros de teste
Hardware
- Conexão (USB, Bluetooth, QR code)
- Configuração (escolha o modelo e os acessórios, atribua nomes de componentes)
- Controle (controle manual do robô, gravação da posição do robô)
- Fazer o download do código
Ajuda
- Documentação
- Tutoriais interativos
- Ajuda sensível ao contexto
O que fazer agora?
Se você ainda está pensando na sua inscrição, continue lendo sobre considerações de design.
Se quiser saber como é criar um aplicativo simples, confira o codelab de primeiros passos com o Blockly.
Se você já quiser começar a programar o aplicativo: