add templates #5

rui.moraes · 2026-06-24T21:02:42-03:00

rui.moraes commented

2026-06-24 21:02:42 -03:00

Resumo

Adiciona duas atividades de demonstração (Exemplo e Exemplo 2) à plataforma Decoda, projetadas como material de onboarding para novos desenvolvedores. Cada atividade exibe o fluxo arquitetural completo: instanciação Blockly + Phaser, ponte via JS-Interpreter, e ciclo de Sucesso/Falha.

Atividade: Exemplo (`/atividades/programacao/exemplo`)

Grade 5×5. O aluno move o logo da Decoda até o alvo verde usando blocos de movimento e repetição.

Blocos disponíveis: repetir N vezes, número, mover para DIREITA, mover para BAIXO
Limite: 6 blocos — força o uso de laços em vez de repetição manual
Solução ótima: repetir 4 { moverDireita } + repetir 4 { moverBaixo }

Sucesso: personagem alcança a célula (4,4) → stopInternal() → handleValidation()
Falha: personagem sai dos limites da grade → stopInternal() → handleFailure()

Ensinamentos arquiteturais embutidos no código:

ui/constants.js — como referenciar assets de /public via URL direta (sem import de módulo)
ui/layout.js — separação entre lógica de jogo e construção visual da cena
game.js — preload + this.load.image() para carregar o logo.png

Atividade: Exemplo 2 (`/atividades/programacao/exemplo2`)

Display de terminal minimalista. O aluno usa blocos de texto para imprimir a frase exata "SOBERANIA DIGITAL".

Blocos disponíveis: imprimir, texto (literal), juntar texto
Limite: 4 blocos — comporta tanto a solução simples (imprimir "SOBERANIA DIGITAL") quanto a com concatenação
Validação: sceneRef.textoAtual === "SOBERANIA DIGITAL" (comparação exata)

Ensinamentos arquiteturais embutidos:

hooks/setupExemplo2API.js — diferença entre createNativeFunction (síncrona) e createAsyncFunction (assíncrona com callback)
validators.js — como ler estado da cena (sceneRef) no momento da validação

Estrutura de arquivos

Ambas as atividades seguem o padrão arquitetural existente:

exemplo(2)/
├── ExemploGame(2).jsx # GameStateProvider → GameBase → BlocklyEditor
├── game.js # Cena Phaser + createGame factory
├── blocks/blocks.js # defineBlocks + defineGenerators + toolbox
├── hooks/setup*API.js # Ponte JS-Interpreter ↔ Phaser
├── validation/validators.js # extends BaseGameValidator
├── config/config.js # Fases, maxBlocks, mensagens
└── ui/
├── constants.js # Assets, dimensões, cores
└── layout.js # Funções de construção visual (sem lógica de jogo)

Checklist

Fluxo de Sucesso disparando gameEventBus.gameSuccess()
Fluxo de Falha disparando gameEventBus.gameFailure(reason)
Hooks onSuccess / onFailure com animações antes do modal
maxBlocks configurado em ambas as atividades
Rotas registradas em App.jsx
Código visual isolado em ui/ (cenas limpas e legíveis)

## Resumo Adiciona duas atividades de demonstração (`Exemplo` e `Exemplo 2`) à plataforma Decoda, projetadas como **material de onboarding para novos desenvolvedores**. Cada atividade exibe o fluxo arquitetural completo: instanciação Blockly + Phaser, ponte via JS-Interpreter, e ciclo de Sucesso/Falha. --- ## Atividade: Exemplo (`/atividades/programacao/exemplo`) Grade 5×5. O aluno move o logo da Decoda até o alvo verde usando blocos de movimento e repetição. **Blocos disponíveis:** `repetir N vezes`, `número`, `mover para DIREITA`, `mover para BAIXO` **Limite:** 6 blocos — força o uso de laços em vez de repetição manual **Solução ótima:** `repetir 4 { moverDireita }` + `repetir 4 { moverBaixo }` **Sucesso:** personagem alcança a célula (4,4) → `stopInternal()` → `handleValidation()` **Falha:** personagem sai dos limites da grade → `stopInternal()` → `handleFailure()` **Ensinamentos arquiteturais embutidos no código:** - `ui/constants.js` — como referenciar assets de `/public` via URL direta (sem `import` de módulo) - `ui/layout.js` — separação entre lógica de jogo e construção visual da cena - `game.js` — `preload` + `this.load.image()` para carregar o `logo.png` --- ## Atividade: Exemplo 2 (`/atividades/programacao/exemplo2`) Display de terminal minimalista. O aluno usa blocos de texto para imprimir a frase exata `"SOBERANIA DIGITAL"`. **Blocos disponíveis:** `imprimir`, `texto` (literal), `juntar texto` **Limite:** 4 blocos — comporta tanto a solução simples (`imprimir "SOBERANIA DIGITAL"`) quanto a com concatenação **Validação:** `sceneRef.textoAtual === "SOBERANIA DIGITAL"` (comparação exata) **Ensinamentos arquiteturais embutidos:** - `hooks/setupExemplo2API.js` — diferença entre `createNativeFunction` (síncrona) e `createAsyncFunction` (assíncrona com callback) - `validators.js` — como ler estado da cena (`sceneRef`) no momento da validação --- ## Estrutura de arquivos Ambas as atividades seguem o padrão arquitetural existente: exemplo(2)/ ├── ExemploGame(2).jsx # GameStateProvider → GameBase → BlocklyEditor ├── game.js # Cena Phaser + createGame factory ├── blocks/blocks.js # defineBlocks + defineGenerators + toolbox ├── hooks/setup*API.js # Ponte JS-Interpreter ↔ Phaser ├── validation/validators.js # extends BaseGameValidator ├── config/config.js # Fases, maxBlocks, mensagens └── ui/ ├── constants.js # Assets, dimensões, cores └── layout.js # Funções de construção visual (sem lógica de jogo) ## Checklist - [x] Fluxo de Sucesso disparando `gameEventBus.gameSuccess()` - [x] Fluxo de Falha disparando `gameEventBus.gameFailure(reason)` - [x] Hooks `onSuccess` / `onFailure` com animações antes do modal - [x] `maxBlocks` configurado em ambas as atividades - [x] Rotas registradas em `App.jsx` - [x] Código visual isolado em `ui/` (cenas limpas e legíveis)

rui.moraes added 1 commit 2026-06-24 21:02:42 -03:00

add templates b210ed4f92

rui.moraes added 1 commit 2026-06-24 21:26:40 -03:00

update doc 592a5a17e4

rui.moraes merged commit fd45878b06 into main

2026-06-24 21:27:08 -03:00

rui.moraes deleted branch feature/template

2026-06-24 21:27:08 -03:00

rui.moraes referenced this issue from a commit

2026-06-24 21:27:09 -03:00

Merge pull request 'add templates' (#5) from feature/template into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: educacao/decoda#5