Aula 14: Termynal.js Interativo 🐚
Linha de Comando que Ganha Vida 🎬
O que vamos aprender hoje? 🎯
- O Conceito de Terminal Simulado 🐚
- Sintaxe do Termynal.js 🧱
- Inputs vs Outputs ($) ⚙️
- Customização de Fluxo ⏱️
- UX em Documentação Técnica 🚀
1. O Conceito de Terminal Simulado 🐚
Por que apenas colar texto?
Mostre o processo, não apenas o resultado.
A digitação humana cria conexão didática.
2. Sintaxe do Termynal.js 🧱
O bloco de código agora tem nome: termynal.
O Início de Tudo 🚀
Sintaxe: Três crases + termynal.
3. Inputs vs Outputs ($) ⚙️
Como o script sabe o que animar?
O Sinal do Prompt: $ ⌨️
Indica uma linha que será "digitada".
Geralmente comandos do usuário.
Saída do Sistema (Output) 🖥️
Linhas sem prefixo especial.
Aparecem de forma instantânea (ou rápida).
Exemplo Real 🐚
- Comando:
mkdir($) - Resultado:
docs/(sem $)
4. Customização de Fluxo ⏱️
Controlando o ritmo da aula.
Prompts secundários: > 💬
Para simular o interior de uma ferramenta.
Animando Listas 📋
Ótimo para mostrar progresso de downloads:
5. UX em Documentação Técnica 🚀
- Foco: O usuário olha para onde o texto "nasce".
- Clareza: Diferenciação visual entre comando e resposta.
- Acessibilidade: O texto continua sendo selecionável e copiável.
Visualização (Mermaid) 🧜♀️
mermaid graph TD A[Usuário Entra na Página] --> B{Rola até Terminal?} B -- Sim --> C[Inicia Animação] C --> D[Digita $] D --> E[Exibe Output] E --> F[Fim da Simulação]
Praticando no Terminal 🐚
Exercício Rápido 🧠
O que o símbolo $ faz na animação?
A) Gera um erro B) Simula a digitação ✅ C) Deleta a linha
Mini-Projeto 🎨
Crie seu guia_cli.md.
- Tutorial de 3 passos
- Pelo menos 2 outputs simulados
- Bloco
termynalcompleto
Resumo da Aula 📝
termynalé o identificador.$para comandos.- Sem prefixo para respostas.
- Melhora 100% a didática técnica.
Próxima Parada... 🚂
Aula 15 - Projeto Integrador Final 🚀
Vamos unir TUDO o que aprendemos em um único repositório épico!
Obrigado! 🙏
"Documentação não precisa ser estática. Ela pode ser uma experiência."