O que é programação em blocos? Como um programa em blocos vira código de verdade

Programação em blocos é um jeito de montar um programa empilhando blocos coloridos, parecidos com peças de quebra-cabeça, em vez de digitá-lo linha por linha. Cada bloco é uma única instrução, como “configurar o pino como saída”, “acender o LED” ou “aguardar 100 ms”. Como os blocos só se encaixam onde cabem, erros como esquecer um ponto e vírgula, deixar um parêntese aberto ou digitar um comando errado simplesmente não acontecem, e você pode se concentrar na lógica do programa. Por isso a programação baseada em blocos é vista como a porta de entrada mais suave para a programação, tanto para crianças quanto para iniciantes.

Mas programação em blocos não é uma linguagem de brinquedo. Por trás de todo programa em blocos que vai para um Arduino ou um Raspberry Pi Pico existe código de verdade, e a placa sempre executa esse código. Neste artigo você vai ver o que são os blocos, o que as cores deles indicam e como um programa em blocos vira código C++ ou MicroPython de verdade, passo a passo, usando projetos grátis do BlueGrays. No final você também encontra os pontos fortes e os limites da programação em blocos e como ela se combina com ferramentas como Scratch, mBlock e Tinkercad.

O que é programação em blocos e por que “blocos”?

Na programação em blocos, cada instrução é uma peça com encaixes e saliências nas bordas. A saliência na parte de baixo de um bloco se encaixa no recorte do bloco de baixo, então as instruções rodam de cima para baixo, em ordem. Alguns blocos têm uma “boca” aberta por dentro: são blocos contêineres, que guardam outros blocos. Outros têm espaços ovais brancos onde você encaixa um número ou outro bloco de valor. Como o formato de cada peça decide o que pode ir onde, é quase impossível montar um programa que quebre as regras. A maioria dos editores de blocos de hoje segue o caminho aberto pelo Scratch, do MIT, e pela biblioteca de código aberto Blockly, do Google. Os blocos do BlueGrays também são baseados no Blockly; criamos o conjunto de blocos nós mesmos, pensando em projetos de eletrônica, e ele aparece no idioma do app. Não se esqueça: blocos não são uma nova linguagem de programação. Instruções, ordem, condições, laços e variáveis são exatamente os mesmos conceitos do código em texto; os blocos só os tornam visíveis.

Como um programa em blocos vira código de verdade?

Os editores de blocos usam um gerador de código nos bastidores: cada tipo de bloco tem um modelo em código de texto, e conforme os blocos são empilhados esses modelos são unidos em ordem. O BlueGrays é um pouco mais rigoroso: os blocos de cada projeto são feitos para corresponder, um a um, ao código real que vai para a placa. Cada linha nos blocos tem um equivalente no código, e cada linha de código tem um equivalente nos blocos. Nos projetos de Arduino e ESP32 esse código é C++; nos projetos de Raspberry Pi Pico, é MicroPython. Para ler um programa em blocos, basta conhecer estas cinco partes:

• configuração (uma vez): a seção que roda uma única vez quando a placa é ligada ou reiniciada. Corresponde à função setup() do Arduino, e normalmente é ali que os pinos são definidos como ENTRADA ou SAÍDA.
• repetir para sempre: a seção que roda de cima para baixo, de novo e de novo, enquanto a placa estiver ligada. No Arduino é a função loop(); no MicroPython, um laço while True:.
• Blocos de comando: blocos como “escrever ALTO no pino 9” ou “aguardar 100 ms”, que são empilhados dentro dos contêineres e fazem uma tarefa cada um. A maioria deles é uma única linha de código em texto.
• Blocos de valor: números como 9 ou 100 nos ovais brancos e blocos arredondados que devolvem um resultado, como “ler pino 13”. Eles se encaixam nos espaços dos blocos de comando e viram o valor entre parênteses no código.
• Menus suspensos: opções como SAÍDA / ENTRADA ou ALTO / BAIXO. Correspondem às constantes OUTPUT / INPUT e HIGH / LOW do código e, como o menu só oferece opções válidas, não tem como escrevê-las errado.

Blocos e código lado a lado: o projeto Pisca LED

Chega de teoria, vamos a um exemplo real. No projeto Pisca LED, um LED e um resistor são ligados ao pino 9, e o LED pisca cinco vezes por segundo. Na tabela abaixo traduzimos para código, um por um, os blocos da imagem acima. Cada linha é um bloco, e cada bloco é uma linha de código:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

O código tem algumas coisas que você não vê nos blocos: a palavra void, as chaves e os pontos e vírgulas. São regras de sintaxe do C++, e nos blocos o próprio formato cuida delas. A “boca” de um bloco contêiner faz o papel das chaves, e os blocos encaixados um embaixo do outro fazem o papel da ordem das linhas. Se você trocasse o 100 do espaço de valor por 1000, o código passaria a dizer delay(1000) e o LED piscaria uma vez por segundo. Se escolhesse BAIXO em vez de ALTO no menu, o HIGH viraria LOW. Graças a essa correspondência um a um, depois de alguns projetos você começa a ler o código sem olhar para os blocos. O circuito e a montagem passo a passo deste mesmo projeto estão na parte 2 da série: piscar um LED com programação em blocos.

O que as cores dos blocos significam?

Nos editores de blocos, a cor não é enfeite; ela mostra de que categoria o bloco vem. Quando você olha um programa pela primeira vez, as cores permitem ler assim: “aqui uma variável é declarada, aqui uma decisão é tomada, aqui tem um laço”. Estas são as categorias que você vai ver nas imagens de blocos dos projetos do BlueGrays:

Os formatos também dão pistas. Os blocos de condição e de comparação têm pontas afiadas, parecidas com um hexágono, e se encaixam no espaço de condição de um bloco “se”, enquanto os blocos de número e de variável têm pontas arredondadas. Vale notar um detalhe na tabela: no bloco “contar com i de 0 até 5 em passos de 1” o limite superior está incluído, então i assume os valores 0, 1, 2, 3, 4 e 5. No código isso é escrito com a condição i < 6, e o laço roda seis vezes. O projeto LED sequencial acende seis LEDs um depois do outro exatamente com esse bloco; explicamos os blocos de laço e de vetor em detalhes na parte laços e variáveis da série.

Os blocos “se” aninhados desta imagem viram linhas if aninhadas no código. O bloco “se button ≠ lastButton” é a linha if (button != lastButton) e roda quando o estado do botão muda. O “se button = 1” dentro dele pega só o momento em que o botão é pressionado. O bloco “definir ledState como não ledState” é a linha ledState = !ledState;, que transforma 0 em 1 e 1 em 0. O bloco “escrever ledState no pino 7” que vem em seguida é digitalWrite(7, ledState);. Você pode ver o projeto completo na página Ligar e desligar um LED com botão (On/Off); explicamos a relação entre o bloco “se” e o if/else na parte botões e condições da série.

C++ no Arduino e no ESP32, MicroPython no Pico

A mesma lógica de blocos é traduzida para linguagens diferentes em placas diferentes. Nos projetos de Arduino e ESP32 os blocos correspondem a código C++, e os blocos configuração e repetir para sempre viram setup() e loop(). Por exemplo, os blocos do projeto Pisca LED com ESP32 têm a mesma estrutura do Pisca LED; só o pino é o 5 e a espera é de 500 ms. Nos projetos de Raspberry Pi Pico os blocos viram MicroPython. Aqui não existe a função setup(): o que está dentro do bloco de configuração vira linhas que rodam uma vez no início do arquivo, e o bloco repetir para sempre vira um laço while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Dá para acompanhar a correspondência linha por linha. O bloco “declarar inteiro (int) LED_PIN = 14”, dentro de “variáveis globais (no topo)”, é a linha LED_PIN = 14; como o Python não escreve tipos, a parte (int) não aparece no código. O bloco “pino led : GP LED_PIN, SAÍDA” vira led = Pin(LED_PIN, Pin.OUT). “ligar (on) pino led” é led.on(), “aguardar 0.5 segundos” é time.sleep(0.5) e “escrever na serial” é uma linha print(). O bloco “juntar textos” coloca o texto “LED pin: GP” e o valor de LED_PIN lado a lado com +. Atenção: no Arduino a espera é em milissegundos (100 ms), no MicroPython é em segundos (0.5), e os blocos mostram essa diferença com blocos separados, “aguardar … ms” e “aguardar … segundos”. Para o circuito, veja a página LED externo no Raspberry Pi Pico; se o Pico é novidade para você, ler antes o que é o Raspberry Pi Pico vai facilitar as coisas.

Vantagens e limites da programação em blocos

Programação em blocos não é a resposta para tudo; é uma ponte. Nas primeiras semanas, é um jeito muito poderoso de entender a lógica de um programa, e o objetivo de verdade é atravessar essa ponte em algum momento e olhar para o código em texto com confiança. Ver blocos e código lado a lado acelera essa passagem, porque em cada projeto novo você vê os mesmos blocos virarem as mesmas linhas, de novo e de novo. Depois de encontrar o bloco “repetir para sempre” em dez projetos, a palavra loop() não vai mais parecer estranha. Quando estiver pronto para o código em texto, fundamentos da programação Arduino mostra tudo, de variáveis a funções, com exemplos.

Para quem é a programação em blocos?

• Crianças e famílias: crianças a partir de 9-10 anos que já leem com facilidade podem começar junto com um adulto. Com os blocos na tela e um LED acendendo na protoboard, programar deixa de ser algo abstrato.
• Professores e clubes de robótica: explicar um projeto primeiro com blocos e depois passar para o código reúne níveis diferentes na mesma aula. O plano de aula que preparamos para isso está na última parte da série: um plano de aula de robótica com programação em blocos.
• Iniciantes em Arduino: se você acabou de pegar sua placa e os primeiros sketches parecem confusos, os blocos são o jeito mais rápido de ver o que cada linha faz. Para conhecer a própria placa, comece por o que é Arduino.
• Quem tem dificuldade para ler código: entender um programa que outra pessoa escreveu é uma habilidade por si só. Olhar os blocos de um projeto pronto para entender a estrutura facilita ver o que um código longo faz em cada parte.

Comparação com Scratch, mBlock, Tinkercad e MakeCode

A maioria das ferramentas que vêm à mente quando se fala em programação em blocos são editores que rodam no computador ou no navegador, e cada uma brilha na sua área. O que elas têm em comum é que você arrasta os blocos e monta o seu próprio programa. O BlueGrays atende a uma necessidade diferente: ele mostra os blocos de projetos prontos e testados lado a lado com o esquema do circuito, a lista de componentes e o código real. No app você não monta seus próprios blocos em um programa (por enquanto); em vez disso, você lê como é construído um programa que comprovadamente funciona. Por isso essas ferramentas não competem entre si; elas se complementam. Por exemplo, você pode comparar uma sequência de semáforo que montou no mBlock com os blocos do projeto Semáforo e, se ainda não tiver uma placa, simular o circuito no Tinkercad. Para mais detalhes, veja os guias mBlock com Arduino e simulação de Arduino no Tinkercad.

Como usar a programação em blocos no app BlueGrays

1. Escolha em Explorar › Projetos um projeto com o selo “Blocos”. Você também pode usar o filtro para mostrar só os projetos com blocos. Mais de 100 projetos do app têm versão em blocos, a maioria deles de Arduino e o restante de ESP32 e Raspberry Pi Pico.
2. Na seção de código do projeto, ative a chave Ver em blocos. No lugar do código aparecem os blocos do mesmo programa; toque na imagem para abri-la em tela cheia e ampliar com calma.
3. Vá para a aba Entenda os blocos. O programa é explicado passo a passo: em cada passo aparecem só os blocos daquele passo e o que eles fazem.
4. Se quiser saber o que um comando faz, consulte o Guia de código. Cada exemplo ali aparece em blocos e também com os comandos de Arduino e MicroPython.
5. Desative a chave para voltar ao código real. Copie, cole na Arduino IDE (no Thonny, para o Pico) e carregue na sua placa.
6. Reforce o que aprendeu com as Perguntas do dia: 5 perguntas por dia em níveis de A1 a C2, um ranking semanal e medalhas.

Os blocos e o código de 31 projetos são totalmente grátis; nos outros projetos, os blocos são desbloqueados com o Premium, assim como o código. Alguns dos projetos grátis que são um bom primeiro passo: Pisca LED, Dois LEDs piscando alternadamente, Semáforo, LED sequencial, Pisca LED com ESP32 e Pisca LED da placa do Raspberry Pi Pico. Na página programação em blocos você vê todos os projetos com blocos por plataforma e também pode comparar lado a lado os blocos e o código de um projeto de exemplo.

Série Dos blocos ao código: o roteiro

1. O que é programação em blocos e como um programa em blocos vira código de verdade (este artigo)
2. O primeiro programa: piscar um LED com programação em blocos, blocos e C++ lado a lado
3. Botões e condições: o bloco “se” e o if/else
4. Laços e variáveis: repetir para sempre, contar, vetores e contadores
5. Lendo sensores com blocos, a porta serial e o MicroPython no Pico
6. Para professores: um plano de aula de robótica com programação em blocos

Na próxima parte da série, montamos do zero o projeto Pisca LED deste artigo, com o circuito, os blocos e o código C++ lado a lado, em piscar um LED com programação em blocos. Até lá, você pode abrir no app BlueGrays os projetos citados aqui, com o esquema do circuito e o código, e passar com um toque para a versão em blocos do mesmo programa com Ver em blocos ou para uma explicação passo a passo com Entenda os blocos.