Creación de componentes de terminal basados ​​en web con Termino.js

Las terminales permiten acceder a las aplicaciones mediante un conjunto de comandos predefinidos. Pueden utilizarse para diversos casos de uso, como conectarse a un servidor remoto, interactuar con un motor de base de datos y mucho más. Termino.js es una terminal web que facilita su integración en una aplicación web.

Este artículo explorará qué es Termino.js y cómo integrarlo fácilmente en su aplicación web para crear excelentes terminales.

¡Comencemos!

Introducción a los terminales basados ​​en web

Una terminal web es una terminal accesible desde un navegador web. Está integrado en el navegador y permite a los usuarios interactuar con aplicaciones, sistemas, servidores remotos, bases de datos y mucho más sin necesidad de configurar ni instalar una terminal física en el dispositivo del usuario. Con las terminales web, todo lo que necesitan los usuarios está directamente en el navegador.

Comprender Termino.js y sus casos de uso

Termino.js es una biblioteca JavaScript de código abierto que integra fácilmente una terminal intuitiva y web en tu página web. Extensible y personalizable, Termino.js es útil si quieres mostrar un componente en tu sitio web que funcione como terminal sin la sobrecarga de importar un terminal completo. Además, ahorra tiempo al integrar rápidamente una terminal ligera y personalizada en tu aplicación web.

Termino.js se puede utilizar:

• Para conectarse a un servidor SSH de terceros
• Como carcasas o terminales personalizados para aplicaciones web
• Para crear juegos interactivos basados ​​en texto.
• Para crear tutoriales interactivos

En nuestro proyecto de demostración, veremos cómo recibir entradas de un usuario final y devolver salidas personalizadas. También exploraremos cómo personalizar la apariencia de la terminal y, posteriormente, veremos una sección avanzada donde crearemos métodos personalizados con los que podrán interactuar diversos comandos de usuario.

Configuración del proyecto

Para empezar, crearemos una aplicación web sencilla. Acceda a la terminal y ejecute el siguiente comando:

mkdir termino - web y cd termino - web

A continuación, crea un archivo:index.html

índice táctil .html

Actualice el contenido de la siguiente manera:

!DOCTYPE html html lang = "es" head meta charset = "UTF-8" / meta name = "viewport" content = "width=ancho-del-dispositivo, escala-inicial=1.0" / title Documento /title /head body div id = "terminal" pre /pre textarea class = "termino-input" rows = "1" wrap = "hard" /textarea /div script src = "index.mjs" type = "module" /script /body /html                                             

A continuación, cree el archivo. Este archivo contendrá la lógica de la aplicación y es donde se iniciará y llamará Termino.js:index.mjs

índice táctil .mjs

Actualice el contenido del archivo con el siguiente código:

importar { Termino } desde "https://cdn.jsdelivr.net/gh/MarketingPipeline/ Termino.js@v1.0.0 /dist/termino.min.js"; dejar término = Termino ( documento . getElementById ("terminal" )); término. salida ("¡Hola mundo!");      

Cuando visitemos la página, veremos la terminal interactiva en acción:

Acabamos de implementar una terminal web que recibe la entrada del usuario y devuelve una salida predefinida con solo tres líneas de código. Y como Termino.js es ligero, esto no afecta negativamente a la página web; ¡Una razón más para elegir esta terminal!

Personalización de Termino.js

Para explorar más funcionalidades de Termino.js, personalicemos ahora la aplicación básica que creamos.

Primero, crea un archivo:index.css

índice táctil .css

Luego, reemplace el contenido con lo siguiente:

. repl { text-shadow: none; color: #333; background: #f8f8f8; padding: 0; text-align: left; width: 600px; margin: 50px auto; border-radio: 3px; border: 1px solid #ddd; overflow: hidden; } . repl code { height: 200px; overflow-y: scroll; } pre { margin: 0; } . termino-console { padding: 11px 16px; display: block; } . termino-input-container { display: flex; } . termino-input-container * { outline: none; border: none; white-space: pre-wrap; font-family: monospace; color: #444; fondo : #f0f0f0; altura mínima: 14px; /* mínimo una línea */ relleno : 10px ; margen: 0; borde-radio: 0 0 3px 3px; borde superior : 1px sólido #ddd ; } . término-entrada { flex : 1 ; altura : 100 %; /* empezar con una línea de alto */ padding - left : 0 ; } . termino-prompt a {font-weight: negrita; relleno: 8px 10px; } @pantalla multimedia y (ancho máximo: 800 px) {. respondedor {ancho: 100 %; } } . lua {cambiar tamaño: ninguno; desbordamiento: oculto; } pre {salto de palabra: descanso-todo; espacio en blanco: prelínea; } . código de respuesta {comportamiento de desplazamiento: suave; } /* ocultar la barra de desplazamiento pero permitir el desplazamiento */ . código de respuesta {-ms-overflow-style: ninguno; /* para Internet Explorer, Edge */ barra de desplazamiento - ancho: ninguno; /* para Firefox */ overflow -y:desplazamiento; } . código de respuesta ::- webkit - barra de desplazamiento {pantalla: ninguna; /* para Chrome, Safari y Opera */ } . cargando : después { contenido : " ." ; animación: puntos pasos de 1 s (5, fin) infinito; } @keyframes puntos { 0 %, 20 % { color : rgba ( 0 , 0 , 0 , 0 ); texto - sombra : 0.25em 0 0 rgba ( 0 , 0 , 0 , 0 ), 0.5em 0 0 rgba ( 0 , 0 , 0 , 0 ); } 40 % { color : blanco ; texto - sombra : 0.25em 0 0 rgba ( 0 , 0 , 0 , 0 ), 0.5em 0 0 rgba ( 0 , 0 , 0 , 0 ); } 60 % { texto - sombra : 0.25em 0 0 blanco , 0.5em 0 0 rgba ( 0 , 0 , 0 , 0 ); } 80 %, 100 % { texto - sombra : 0.25em 0 0 blanco , 0.5em 0 0 blanco ; } }                                                         

Por último, actualice el archivo, agregando el enlace a la hoja de estilos CSS y cualquier cambio necesario:index.html

!DOCTYPE html html lang = "es" head meta charset = "UTF-8" / meta name = "viewport" content = "width=ancho-del-dispositivo, escala-inicial=1.0" / title Documento /title link rel = "hoja-de-estilo" href = "index.css" / /head body section class = "sección--independiente" id = "terminal" terminal-processed = "true" div class = "repl" pre /pre div class = "termino-input-container" label id = "termino-prompt" for = "termino-input" → /label textarea class = "termino-input" rows = "1 " wrap = "hard" placeholder = "¡Ingrese la entrada aquí!" corrector ortográfico = "falso" /área de texto /div /div /sección script src = "index.mjs" tipo = "módulo" /script /cuerpo /html                                                                                            

Ahora, cuando visitemos la página, veremos la terminal interactiva en acción:

En el ejemplo anterior, aplicamos estilos personalizados a Termino.js. Esto es especialmente útil si desea ajustarse a un patrón de diseño o estilo de marca específico.

Casos de uso avanzados para Termino.js

Ahora, exploramos algunos usos más complejos de Termino.js.

Veremos cómo agregar métodos personalizados que se invocan cuando el usuario interactúa con la terminal. Esta es una excelente manera de mostrar lo fácil que es interactuar con métodos personalizados dentro de tu aplicación web, como interactuar con un endpoint de terceros mediante una llamada a la API.

Actualice el contenido del archivo con el código siguiente:index.mjs

importar { Termino } desde "https://cdn.jsdelivr.net/gh/MarketingPipeline/ Termino.js@v1.0.0 /dist/termino.min.js"; dejar término = Termino ( documento . getElementById ("terminal" )); función print_termino() { término . salida ("Termino.js"); } función asíncrona terminalApp() { término . salida ( `1. Imprimir Termino.js 2. Multiplica dos números 3. ¿Quién te creó? 4. Salir` ); // llama a Termino.js / tu terminal para la entrada inicial let termvalue = await term . entrada ( "¿Qué te gustaría hacer?" ); // función para multiplicar números async function multiplicar_números () { let número1 = término de espera. input("Primer número a multiplicador"); let número2 = término de espera. input("Segundo numero al multiplicador"); term.output(`Producto de ${number1} y ${number2} es ${ Número(número1) * Número(número2) }`); } async function printDev() { term.output("Chibuike es el creador de esta demostración. Su perfil de Github es href='https://github.com/chyke007' chyke007/a, si desea contratarlo para cualquier trabajo. No dude en comunicarse con él en GitHub" ); } if (termvalue === "1") { espera print_termino(); } if (termvalue === "2") { espera multiplicar_números(); } if (termvalue === "3") { espera printDev(); } if (termvalue === "4") { term.output("Elegiste la opción 4, saliendo de la terminal"); await term.delay(2000); term.kill(); } if ( valor termino != "1" valor termino != "2" valor termino != "3" valor termino != "4" ) { term.output("Elección inválida"); } // después de llamar - repetir la función nuevamente (si no, salir del menú) if (termvalue != "4") { terminalApp(); }}aplicaciónterminal();

En este fragmento de código, se solicita al usuario que introduzca una entrada entre 1y 4. Según la entrada, se realizan diferentes acciones. Si el usuario introduce una entrada no válida, Invalid choicela terminal muestra el texto, que puede verse en la línea 48.

Después de procesar cada comando, terminalAppse llama al método para iniciar el proceso nuevamente.

A continuación se muestra una demostración del resultado:

Beneficios de Termino.js

Termino.js ofrece a los usuarios muchos beneficios, incluidos los siguientes:

• Altamente personalizable:Tan fácil como aplicar elementos HTML y estilos CSS a los elementos
• No se necesitan terceros:No requiere muchas dependencias; una simple importación de la versión distribuida minimizada es todo lo que se necesita para comenzar.
• Altamente extensible:Puedes agregar tus comandos para adaptarlo a un caso de uso específico
• Admite múltiples instancias:Puede tener más de una terminal en la página
• Ligero:Muy rápido, ya que se basa únicamente en JavaScript

Posibles problemas con terminales web y componentes de terminales

A pesar de sus numerosos beneficios, Termino.js y los terminales y componentes de terminal basados ​​en web pueden encontrar problemas, entre ellos:

• SeguridadDebido a que se ejecutan en la web mediante scripts importados, las terminales web son vulnerables a exploits si no se implementan correctamente o si la entrada del usuario no se depura adecuadamente. Pueden ocurrir problemas como ataques de inyección o secuencias de comandos entre sitios.
• Compatibilidad del navegador:La mayoría de los navegadores pueden representar el componente de forma diferente, lo que genera una experiencia de usuario inconsistente.
• ActuaciónLas terminales web pueden experimentar problemas de rendimiento si los datos aumentan considerablemente o se realizan muchas operaciones complejas. Esto se debe a que se ejecuten en un navegador con límites y asignaciones. Esto podría provocar lentitud o falta de respuesta en la aplicación web.
• Persistencia de la sesiónEs posible que las terminales web no conserven el estado de la sesión entre recargas de página. Los usuarios podrían perder el progreso si esto sucede o si se cierra accidentalmente una pestaña del navegador.
• Experiencia del usuarioLa experiencia de usuario de los terminales web puede ser diferente a la de los terminales nativos. Algunos usuarios pueden apreciar la accesibilidad y la comodidad de los terminales web, mientras que otros prefieren la familiaridad de los terminales nativos.

Preguntas frecuentes sobre terminales web

¿Cómo creo una terminal basada en web?
La mayoría de las terminales web se incluyen como etiquetas de script externas en la página web. Una vez hecho esto, se puede usar contenido HTML simple para diseñar la interfaz y que funcione rápidamente.

¿Puedo tener múltiples terminales en una página?
Sí, la mayoría de los terminales lo admiten. Generalmente, depende del uso del terminal. Termino.js permite tener varios terminales en la misma página.

¿Puedo incluir mi lógica personalizada?
Sí, puedes: la mayoría de los terminales basados ​​en web son extensibles, incluido Termino.js.

¿Tiene algún impacto en el rendimiento de mi sitio web?
No, una terminal basada en web es liviana y se carga principalmente desde una CDN, por lo que no afectará el rendimiento de su aplicación web.

Alternativas a Termino.js

A continuación se muestran otras terminales web de código abierto que se comparan con Termino.js:

• Xterm.jsEscrito en mecanografiado, es muy rápido. Admite un renderizador acelerado por GPU y no requiere dependencias para empezar. Admite emojis y está diseñado pensando en la accesibilidad. También admite la personalización y la integración con aplicaciones de terminal existentes, como Vim y Bash, y cuenta con excelente documentación y una amplia comunidad de desarrolladores para ofrecer soporte.
• MariposaUna terminal compatible con Xterm.js que soporta la mayoría de sus funciones. Admite múltiples sesiones y notificaciones de escritorio en la salida de la terminal. Es altamente personalizable, admite temas CSS/SASS y HTML en la terminal, y también admite certificados X509 para mayor seguridad.
• Web de terminalSe utiliza para productos InterSystems y permite acceder a bases de datos desde cualquier lugar. Incorpora resaltado de sintaxis y autocompletado. Los comandos más comunes también se pueden guardar en favoritos. Su objetivo principal es facilitar la gestión remota de productos InterSystems.
• Emulador de terminal jQueryExtienda jQuery como complemento. Incorpora atajos de teclado y permite crear atajos personalizados. Es fácilmente personalizable y admite animaciones. Admita múltiples terminales en una página, cada una con la opción de ejecutar diferentes comandos e historial de comandos (usando almacenamiento local).

Conclusión

Termino.js es una biblioteca potente y flexible para integrar terminales web en aplicaciones. Este tutorial demostró la simplicidad de configurar un terminal básico con Termino.js y ofreció una exploración de sus funcionalidades más avanzadas, como la personalización de estilos.

Espero que hayas disfrutado de este artículo y hayas aprendido lo fácil que es crear una terminal web para tu próximo proyecto. ¡Gracias por leer!

¿Estás agregando nuevas bibliotecas de JavaScript para crear nuevas funciones o mejorar el rendimiento? ¿Qué pasa si hacen lo contrario?

Sin duda, los frontends son cada vez más complejos. A medida que añadas nuevas bibliotecas de JavaScript y otras dependencias a su aplicación, necesitarán mayor visibilidad para garantizar que sus usuarios no se encuentren con problemas desconocidos.

Construya con confianza: comience a monitorear de forma gratuita.

Si quieres conocer otros artículos parecidos a Creación de componentes de terminal basados ​​en web con Termino.js puedes visitar la categoría Guias.