---
sidebar_position: 1
title: "Visão Geral"
---
Esta seção é o ponto de partida para quem quer **criar ou adaptar uma atividade de programação** na plataforma Decoda.

A plataforma já entrega toda a infraestrutura: editor Blockly, interpretador seguro (JS-Interpreter), motor de física e renderização (Phaser), ciclo de sucesso/falha e controles de execução. Você cuida apenas da **lógica do jogo, dos blocos customizados e das regras de validação**.

## O que você vai encontrar aqui

| Página | O que cobre |
|---|---|
| [Usando os Exemplos](./usando-os-exemplos) | Como rodar e interpretar as atividades `Exemplo` e `Exemplo 2`, que foram criadas como código de referência |
| [Passo a Passo](./passo-a-passo) | Roteiro completo: da cópia do template ao registro da rota |
| [Game Design Pedagógico](./game-design) | Princípios para criar atividades que ensinam sem frustrar |

## Pré-requisitos

Antes de criar uma atividade, certifique-se de conhecer:

- A [estrutura de atividades de programação](../plataforma/atividades_programacao/estrutura-de-jogo) da plataforma.
- O papel do [`BaseGameScene`](../plataforma/atividades_programacao/base-game-scene) no ciclo de execução.
- Como o [Blockly](../plataforma/atividades_programacao/blockly) gera código JavaScript.

## Arquitetura em uma visão

Cada atividade é composta por **6 camadas** que se comunicam de forma bem definida:

```mermaid
flowchart TD
    JSX["🎮 XGame.jsx\nComponente React + GameStateProvider"]
    CONFIG["⚙️ config/config.js\nFases, maxBlocks, mensagens"]
    BLOCKS["🧩 blocks/blocks.js\nBlocos customizados + toolbox"]
    API["🔌 hooks/setupXAPI.js\nPonte JS-Interpreter ↔ Phaser"]
    GAME["🖼️ game.js\nCena Phaser + createGame factory"]
    VALID["✅ validation/validators.js\nRegras de sucesso e falha"]
    UI["🎨 ui/\nconstants.js + layout.js"]

    JSX --> CONFIG
    JSX --> BLOCKS
    JSX --> GAME
    GAME --> API
    GAME --> VALID
    GAME --> UI
```

## Fluxo de execução resumido

```mermaid
sequenceDiagram
    participant Aluno
    participant Blockly
    participant Interpreter as JS-Interpreter
    participant Phaser
    participant Validator

    Aluno->>Blockly: Monta blocos
    Blockly->>Interpreter: Código JS gerado
    Interpreter->>Phaser: Chama API da cena (ex: moverDireita())
    Phaser->>Phaser: Anima sprite, atualiza estado lógico
    Interpreter-->>Validator: Execução concluída
    Validator->>Aluno: Sucesso ou Falha com mensagem
```

## Dois caminhos para começar

**Caminho rápido** — copie o `Exemplo` ou o `Exemplo 2` e adapte:
```
app/src/atividades/programacao/exemplo/      ← visual (grade + sprite)
app/src/atividades/programacao/exemplo2/     ← textual (display + imprimir)
```

**Caminho estruturado** — siga o [Passo a Passo](./passo-a-passo) do zero, usando os exemplos como referência de cada decisão.