ascii art generator
1.0.0
Este es un generador de arte ascii a partir de texto usando htmx y spring boot. Esta aplicación se puede utilizar para generar arte ascii a partir de texto. La aplicación está construida usando Spring Boot y HTML. La aplicación utiliza htmx para hacerla interactiva y Spring Boot para servir la aplicación.
Bienvenidos, compañeros desarrolladores, a un viaje al fascinante mundo del desarrollo web, donde estamos a punto de embarcarnos en la creación de algo realmente atractivo: ¡nuestro propio generador de arte ASCII! Imagínese esto: tomar un texto común y corriente y transformarlo en un arte visual cautivador. Emocionante, ¿verdad? En este artículo, profundizaremos en la magia colaborativa de HTMX y Spring Boot para hacer realidad esta visión.
HTMX es como la varita mágica del desarrollo web moderno, conocido por su simplicidad y enfoque fácil de usar. Conecta a la perfección el front-end y el back-end, lo que lo convierte en el compañero perfecto para crear experiencias interactivas. Ahora, combine eso con la solidez del marco Spring Boot y tendrá una combinación potente lista para dar rienda suelta a la creatividad. Para obtener más información sobre HTMX, puede consultar https://htmx.org/
¿Nuestro principal objetivo? Construir un generador de arte ASCII que agregue un toque de estilo al texto sin formato. Imagínese escribir su cita favorita o un mensaje simple y verlo transformarse en una obra de arte ASCII visualmente impresionante. No se trata sólo de codificar, se trata de crear una experiencia que brinde alegría y creatividad al usuario.
A lo largo de esta exploración, descubriremos las complejidades de esta colaboración dinámica. Cerraremos la brecha entre el servidor y el navegador, demostrando cómo estas tecnologías trabajan de la mano para crear una aplicación web única e interactiva. Nos centraremos en hacer que el proceso sea accesible, agradable y, lo más importante, fácil de usar.
Entonces, ¡comencemos! Vayamos a start.spring.io y configuremos el proyecto como se muestra a continuación:
Usaremos Java 17 para este proyecto. Las dependencias que estamos usando aquí son:
**Spring Web: **Proporciona componentes esenciales como controladores, DispatcherServlet y View Resolver, lo que facilita la organización del manejo de solicitudes HTTP y la implementación de la arquitectura modelo-vista-controlador (MVC).
Thymeleaf : Thymeleaf, un motor de plantillas Java del lado del servidor, es una dependencia clave que a menudo se combina con el desarrollo web de Spring Boot. Thymeleaf, que funciona como un motor de plantillas de visualización, permite a los desarrolladores crear páginas web dinámicas e interactivas incorporando construcciones expresivas directamente en las plantillas HTML.
Usaremos una biblioteca llamada Banana , que es una utilidad FIGlet para Java que genera pancartas de texto, en una variedad de tipos de letra, compuestas de letras formadas por conglomerados de caracteres ASCII más pequeños. Puedes consultarlo aquí: https://github.com/yihleego/banana
Ahora abramos el proyecto en el IDE de su elección. Voy a utilizar Intellij Idea.
Agregue también la dependencia de la biblioteca Banana a su pom.xml.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Ahora comencemos a codificar la aplicación. Utilice la siguiente estructura de carpetas como referencia.
He creado la plantilla de interfaz de usuario en el directorio de plantillas que se parece a esto (index.html)
<!doctype html >
< html lang =" en " >
< head >
< title > ASCII Art Generator </ title >
< link
href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css "
rel =" stylesheet "
/>
< script
src =" https://unpkg.com/[email protected] "
integrity =" sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC "
crossorigin =" anonymous "
> </ script >
</ head >
< body class =" bg-gray-100 " >
< div class =" container mx-auto p-8 " >
< h1 class =" mb-8 text-center text-4xl font-bold " > ASCII Art Generator </ h1 >
< div class =" mb-6 flex justify-center " >
< form id =" input-form " class =" text-center " >
< label for =" input-text " class =" mb-2 block " > Enter Text: </ label >
< input
type =" text "
id =" input-text "
name =" input-text "
required
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
/>
< br />
< label for =" font-select " class =" mb-2 mt-4 block " > Select Font: </ label >
< select
id =" font-select "
name =" font-select "
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
> </ select >
< div hx-get =" /api/fonts " hx-trigger =" load " hx-target =" #font-select " > </ div >
< br />
< button
class =" mt-6 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
hx-post =" /api/ascii-art "
hx-target =" #ascii-art "
hx-swap =" outerHTML "
>
Generate ASCII Art
</ button >
</ form >
</ div >
< div class =" mt-10 flex justify-center " >
< pre id =" ascii-art " class =" text-center " > </ pre >
</ div >
< div class =" mt-8 flex justify-center space-x-4 " >
< button
class =" rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
id =" copyButton "
onclick =" copyToClipboard() "
style =" display: none; "
>
Copy
</ button >
< button
class =" rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700 "
id =" downloadButton "
onclick =" downloadFile() "
style =" display: none; "
>
Download
</ button >
</ div >
</ div >
< script >
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}
document . body . addEventListener ( 'htmx:afterSwap' , adjustButtonVisibility )
</ script >
</ body >
</ html >Este archivo representa la página web para un generador de arte ASCII, que incorpora el marco CSS Tailwind para diseñar y la biblioteca HTMX para una interacción perfecta entre el front-end y el back-end. Analicemos los componentes clave y la funcionalidad del código:
La hoja de estilo CSS de Tailwind está vinculada desde una CDN con fines de estilo.
La biblioteca HTMX está vinculada a una CDN. HTMX se utiliza para realizar solicitudes dinámicas y actualizar el contenido de la página sin recargar la página completa.
Estamos usando varias etiquetas HTMX aquí comenzando desde arriba
hx-get : El atributo hx-get especifica una URL (/api/fonts) para realizar una solicitud HTTP GET cuando ocurre el evento hx-trigger especificado.
hx-trigger : este hx-trigger="load" indica que la solicitud GET debe activarse cuando se carga la página.
hx-target : Thehx-target="#font-select" designa el elemento HTML con el ID font-select como destino para la actualización con la respuesta de la solicitud GET. En este caso, carga las opciones de fuente dinámicamente en un menú desplegable.
hx-post : El atributo hx-post especifica una URL (/api/ascii-art) para realizar una solicitud HTTP POST cuando se hace clic en el botón.
hx-swap : hx-swap="outerHTML" indica que todo el contenido del elemento de destino debe reemplazarse con la respuesta de la solicitud POST.
Estas son las etiquetas que usamos aquí, además de que estamos usando las siguientes funciones de JavaScript para modificar el comportamiento de la página.
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}Esta función se encarga de copiar el contenido del texto del arte ASCII al portapapeles.
Crea un nuevo elemento textarea , establece su valor en el contenido de texto del elemento #ascii-art , agrega el textarea al cuerpo del documento, selecciona el contenido, ejecuta el comando 'copiar', registra un mensaje en la consola y elimina el textarea del cuerpo del documento.
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}Esta función se encarga de generar un archivo descargable que contiene el art.
Recupera el contenido de texto del elemento #ascii-art , crea un Blob (objeto binario grande) que contiene el texto, crea un enlace ( <a> ) con una URL que apunta al Blob, establece el atributo de descarga en 'ascii_art.txt ', agrega el enlace al cuerpo del documento, activa un clic en el enlace y elimina el enlace del cuerpo del documento.
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}Esta función ajusta dinámicamente la visibilidad de los botones de copiar y descargar según el contenido del arte ASCII.
Comprueba si el contenido de texto recortado del elemento #ascii-art no está vacío. Si es así, los botones están configurados para mostrarse ( 'inline-block' ); de lo contrario, están configurados para ocultarse ( 'none' ).
Ahora que tenemos la interfaz de usuario lista, necesitamos crear las API /api/ascii-art y /api/fonts. Usaremos el PageController como se muestra a continuación para esto:
package dev . maheshbabu11 . asciiartgenerator ;
import io . leego . banana . BananaUtils ;
import io . leego . banana . Font ;
import org . springframework . web . bind . annotation .*;
import java . util . List ;
@ RestController
@ RequestMapping ( "/api" )
public class PageController {
@ GetMapping ( "/fonts" )
public String getFonts () {
List < String > options = Font . values (). stream (). map ( Font :: getName ). toList ();
StringBuilder optionList = new StringBuilder ();
options . forEach (
option -> {
String optionString = "<option value= " " + option + " " >" + option + "</option>" ;
optionList . append ( optionString );
}
);
return optionList . toString ();
}
@ PostMapping ( "/ascii-art" )
public String asciiArt ( @ RequestParam ( "input-text" ) String inputText ,
@ RequestParam ( "font-select" ) String font ) {
return "<pre id= " ascii-art " >" + BananaUtils . bananaify ( inputText , Font . get ( font )) + "</pre>" ;
}
}¡Ciertamente! Analicemos la funcionalidad de ambas API definidas en el código Java proporcionado:
/api/fonts: se llama a esta API para proporcionar una lista de opciones de fuentes que se pueden usar en el generador de arte ASCII. Recupera una lista de nombres de fuentes de la enumeración Font , que forma parte de la biblioteca Banana. Usando Java Stream API, asigna cada nombre de fuente a un elemento HTML <option> y los agrega a un StringBuilder. El método devuelve la concatenación de estos elementos <option> como una única cadena HTML.
/api/ascii-art: esta API toma el texto ingresado por el usuario y la fuente seleccionada como parámetros y genera arte ASCII en consecuencia. Utiliza el método BanaUtils.bananaify y luego se utiliza para generar arte ASCII basado en el texto de entrada y la fuente seleccionada. El arte ASCII generado está envuelto en una etiqueta HTML <pre> .
Ahora que tenemos el código, ejecutemos la aplicación. Una vez iniciada la aplicación, puede ir a http://localhost:8080/ y probarla.
¿Puedes consultar el código fuente completo de la aplicación aquí? GitHub - MaheshBabu11/ascii-art-generator: Este es un generador de arte ascii a partir de texto usando htmx y…
Además, se implementa en renderizado si desea probarlo https://ascii-art-generator.maheshbabu11.dev/
En este artículo, hemos creado un generador de arte ASCII usando HTMX y Spring Boot. HTMX hace que nuestras páginas web sean más interactivas y Spring Boot proporciona un backend sólido. Con esto, hemos creado una herramienta donde los usuarios pueden ingresar texto, elegir fuentes y generar instantáneamente arte ASCII. Este proyecto muestra la simplicidad y el poder de combinar HTMX y Spring Boot para aplicaciones web dinámicas y atractivas.
¡¡¡Feliz codificación?!!! Deja un ? si disfrutaste leyéndolo.
