Sempre que estamos em uma roda de amigos(as) que trabalham com tecnologia e o assunto é “qual o melhor terminal para programar”, a conclusão é quase sempre unânime: todos menos o do Windows. Eu mesmo confesso que já tive meus entraves – a ponto de tentar usar algumas alternativas no mercado (que podemos discutir em um próximo artigo) – com o prompt de comando do sistema operacional da Microsoft, mas hoje em dia fizemos as pazes e trabalho em paz com ele.
Uma alternativa interessante que muita gente usa é o Git Bash. Esse utilitário faz parte da instalação do bom e velho git nas máquinas Windows. Neste terminal do Git Bash, temos em nossas mãos muitas das funcionalidades que tanto amamos nos terminais dos sistemas operacionais Mac e Linux.
No entanto, neste artigo quero mostrar o terminal de outra perspectiva: da web. Com o XTerm, temos o poder de levar um terminal para dentro da nossa aplicação e dar aos nossos usuários o poder de utilizar várias funções bacanas. Vamos ver com mais detalhes como isso funciona.
Terminal com todo poder na web
O XTerm.js é um componente front-end terminal escrito em JavaScript que funciona no navegador. Ele permite que os aplicativos forneçam terminais completos aos seus usuários e criem ótimas experiências de desenvolvimento. A biblioteca é de código aberto (sob licença MIT) e está disponível no GitHub onde seu repositório já possui mais de quatro mil e oitocentas estrelas.
Dentre as várias funcionalidades bacanas, o projeto destaca:
- Text-based application support: podemos usá-lo para trabalhar com aplicações como bash, git, etc.
- Curses-based application support: também temos a oportunidade de trabalhar com ele junto a aplicações como o vim e o tmux.
- Mouse events support: o XTerm é capaz de capturar eventos de mouse como cliques e scroll.
- CJK (Chinese, Japanese, Korean) character support: suporte a caracteres chineses, japoneses e coreanos.
- Self-contained library: a biblioteca trabalha por conta própria. Isso significa que não depende de outras bibliotecas externas como o jQuery e o React para funcionarem.
- Modular, event-based API: sua API nos permite construir plugins que estendem as suas funcionalidades.
- Entre muitas outras.
Vamos ver como ele funciona na prática.
Hello World
O primeiro passo para fazer uso da ferramenta é trazê-la como dependência para o seu projeto. Para fazer isso, utilizamos o Node – ou melhor, usamos o npm, seu gerenciador de pacotes. Abra o seu terminal (não o XTerm, o terminal do seu sistema operacional) e digite o comando abaixo:
npm install --save xtermFeito isso, precisamos inserir o xterm.js e o xterm.css dentro do nosso front-end. Aqui faremos isso usando uma div com id = “terminal”. O código deve ficar semelhante ao seguinte:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
<script src="node_modules/xterm/dist/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>Finalmente, com as dependências incluídas e a div criada, precisamos instanciar o objeto Terminal e, em seguida, chamar a função open com o objeto DOM da div. O resultado é o seguinte:
Bem legal, não é mesmo? A partir daí, basta usarmos sua API para criar experiências legais para nossos usuários. Como, por exemplo, podemos fazer ele compreender o input do usuário:
term.on('key', (key, ev) => {
if (key.charCodeAt(0) == 13) term.write('\n');
term.write(key);
});Agora já temos outra experiência:
O que achou? Se animou para montar o seu próprio terminal web funcional? Muitos projetos e empresas já o utilizam, como o SourceLair, ttyd, Katacoda e muitos outros. Se montar algo bacana, não deixe de comentar aí embaixo!
Se quiser utilizar o código do artigo, basta clicar aqui.
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?