Imagem de capa
Escolha um único PNG. O Studio reutilizará essa capa em todas as atividades do lote.
Voltar para atividades
Como criar novas
Guia de publicação
Como criar novas
atividades
Do conteúdo gerado por IA até a página pronta no site. Siga estas etapas na ordem e deixe o Activity Studio cuidar dos arquivos.
Antes de começar
Abra a pasta do projeto goodstart-public-site no VS Code. Antes de criar
qualquer arquivo, abra o terminal e execute git pull para baixar as alterações
mais recentes do GitHub.
Terminal
$ git pull Quando a atualização terminar, separe uma imagem de capa no formato PNG. A mesma capa será usada em todas as atividades do lote.
1
PASSO 1
Gere o primeiro conteúdo MDX
Acesse o MDX Builder, forneça o conteúdo-base da aula e escolha o tipo de atividade que deseja criar.
Abrir o MDX Builder1
Cole o texto ou material que servirá como base.
2
Analise o conteúdo e escolha uma das atividades sugeridas.
3
Exporte o resultado e copie todo o MDX, incluindo as linhas --- do início.
4
Repita o processo para cada atividade que fará parte do lote.
Dica: normalmente um lote contém cinco atividades sobre o mesmo tópico.
2
PASSO 2
Prepare as imagens
Imagens de perguntas
Necessárias somente quando o MDX contém imageQuestions. Baixe todas as
imagens e preserve os nomes citados no MDX, como 1.jpg, 2.jpg e 3.gif.
Como saber se preciso de imagens internas?
Procure por imageQuestions: perto do início do MDX. Se esse campo não existir, você precisa apenas da capa.
3
PASSO 3
Abra o Activity Studio
No VS Code, abra o menu Terminal → New Terminal. Um painel aparecerá na parte inferior da tela. Cole o comando abaixo e pressione Enter.
Terminal
$ npm run activities:studio O terminal mostrará um endereço. Abra-o no navegador — normalmente será:
http://127.0.0.1:43224
PASSO 4
Configure o lote
Tópico do lote Comparatives
Quantidade 5 atividades
Imagem de capa do lote
1
Informe o tópico. Use um nome curto, como Comparatives ou Simple Past.
2
Escolha quantas atividades você gerou.
3
Envie o único PNG de capa do lote.
4
Clique em Criar campos.
Os nomes são automáticos
Para um lote chamado “Comparatives”, o Studio sugerirá comparatives-1, comparatives-2 e assim por diante.
5
PASSO 5
Adicione o conteúdo de cada atividade
Cada atividade terá seu próprio card. Cole o MDX correspondente no campo Conteúdo MDX.
Cole o documento inteiro
Inclua o frontmatter, imports, textos e componentes.
Não altere o heroImage manualmente
O Studio apontará todas as atividades para a capa compartilhada.
CASO ESPECIAL Se a atividade usar
Se a atividade usar imageQuestions
O card mostrará quantas imagens internas foram encontradas. Clique em Imagens internas e selecione todos os JPGs, PNGs ou GIFs daquela atividade de uma só vez.
Os nomes dos arquivos precisam corresponder aos caminhos escritos no MDX. O Studio avisará se algum estiver faltando.
6
PASSO 6
Valide e publique
1 Validar lote
Confere os MDX, nomes, capa e imagens internas.
2 Corrigir avisos
Se houver um erro, leia a mensagem exibida no card.
3 Publicar atividades
Cria todos os arquivos nos locais corretos.
Publicação concluída
O Studio mostrará a lista de atividades criadas. Nenhum arquivo existente será sobrescrito.
7
PASSO 7
Confira as páginas no site
Volte ao terminal do VS Code. Encerre o Activity Studio com Ctrl + C e execute:
Terminal
$ npm run dev Abra o endereço mostrado no terminal e visite cada URL informada pelo Studio. Confira:
- ✓ título, descrição e textos;
- ✓ imagem de capa;
- ✓ funcionamento das respostas;
- ✓ todas as imagens de
imageQuestions, quando houver.
8
PASSO 8
Envie as novas atividades para o GitHub
Depois de conferir todas as páginas, volte ao terminal do VS Code e execute os comandos abaixo, um de cada vez e nesta ordem:
Terminal
$ git add .
$ git commit -m "Novas atividades"
$ git push Atividades enviadas
Quando o terminal concluir o git push, as novas atividades estarão disponíveis no GitHub.
RESOLUÇÃO DE PROBLEMAS
Mensagens comuns
“A capa precisa ser PNG”
Converta a imagem para PNG de verdade. Apenas trocar a extensão do arquivo não funciona.
“Já existem arquivos com este nome”
Escolha outro tópico ou ajuste o nome sugerido da atividade para evitar sobrescrever conteúdo.
“Falta a imagem interna”
Confira o nome citado em imageQuestions e selecione o arquivo correspondente.
A página não abriu
Olhe o terminal: se a porta 4322 estiver ocupada, o Studio exibirá automaticamente outro endereço.
PRONTO PARA COMEÇAR?