ascii art generator
1.0.0
Este é um gerador de arte ascii a partir de texto usando htmx e spring boot. Este aplicativo pode ser usado para gerar arte ASCII a partir de texto. O aplicativo é construído usando spring boot e htmx. O aplicativo usa o htmx para torná-lo interativo e o Spring Boot para atendê-lo.
Bem-vindos, colegas desenvolvedores, a uma jornada ao fascinante mundo do desenvolvimento web, onde estamos prestes a embarcar na criação de algo verdadeiramente envolvente — nosso próprio gerador de arte ASCII! Imagine isto: pegar um texto comum e transformá-lo em uma arte visual cativante. Emocionante, certo? Neste artigo, mergulharemos na magia colaborativa do HTMX e do Spring Boot para tornar essa visão uma realidade.
HTMX é como a varinha mágica do desenvolvimento web moderno, conhecido por sua simplicidade e abordagem amigável. Ele conecta perfeitamente o front-end e o back-end, tornando-o um companheiro perfeito para a criação de experiências interativas. Agora, combine isso com a robustez da estrutura Spring Boot e você terá uma combinação poderosa pronta para liberar a criatividade. Para saber mais sobre HTMX você pode conferir https://htmx.org/
Nosso principal objetivo? Para construir um gerador de arte ASCII que adicione um toque de elegância ao texto simples. Imagine digitar sua citação favorita ou uma mensagem simples e vê-la se transformar em uma obra de arte ASCII visualmente deslumbrante. Não se trata apenas de codificação – trata-se de criar uma experiência que traga alegria e criatividade ao usuário.
Ao longo desta exploração, descobriremos as complexidades desta colaboração dinâmica. Iremos preencher a lacuna entre o servidor e o navegador, demonstrando como essas tecnologias funcionam juntas para criar uma aplicação web única e interativa. Vamos nos concentrar em tornar o processo acessível, agradável e, o mais importante, fácil de usar.
Então, vamos começar! Vamos acessar start.spring.io e configurar o projeto conforme mostrado abaixo:
Usaremos Java 17 para este projeto. As dependências que estamos usando aqui são:
**Spring Web: **Fornece componentes essenciais como controladores, DispatcherServlet e View Resolver, facilitando a organização do tratamento de solicitações HTTP e a implementação da arquitetura model-view-controller (MVC).
Thymeleaf : Thymeleaf, um mecanismo de modelo Java do lado do servidor, é uma dependência chave frequentemente associada ao desenvolvimento web do Spring Boot. Funcionando como um mecanismo de visualização de modelos, o Thymeleaf capacita os desenvolvedores a criar páginas da web dinâmicas e interativas, incorporando construções expressivas diretamente em modelos HTML.
Estaremos usando uma biblioteca chamada Banana que é um utilitário FIGlet para Java que gera banners de texto, em uma variedade de fontes, compostos por letras formadas por conglomerados de caracteres ASCII menores. Você pode conferir aqui: https://github.com/yihleego/banana
Agora vamos abrir o projeto no IDE de sua preferência. Vou usar o Intellij Idea.
Adicione também a dependência da biblioteca Banana ao seu pom.xml.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Agora vamos começar a codificar o aplicativo. Por favor, use a estrutura de pastas abaixo para referência
Eu criei o modelo de UI no diretório de modelos que se parece com isto (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 arquivo representa a página da web para um gerador de arte ASCII, incorporando a estrutura Tailwind CSS para estilo e a biblioteca HTMX para interação perfeita entre o front-end e o back-end. Vamos detalhar os principais componentes e funcionalidades do código:
A folha de estilo CSS do Tailwind está vinculada a um CDN para fins de estilo.
A biblioteca HTMX está vinculada a um CDN. HTMX é usado para fazer solicitações dinâmicas e atualizar o conteúdo da página sem recarregar completamente a página.
Estamos usando várias tags HTMX aqui, começando do topo
hx-get : O atributo hx-get especifica uma URL (/api/fonts) para fazer uma solicitação HTTP GET quando o evento especificado hx-trigger ocorre.
hx-trigger : Este hx-trigger="load" indica que a solicitação GET deve ser acionada quando a página for carregada.
hx-target : Thehx-target="#font-select" designa o elemento HTML com o ID font-select como o destino para atualização com a resposta da solicitação GET. Nesse caso, ele carrega as opções de fonte dinamicamente em um menu suspenso.
hx-post : O atributo hx-post especifica uma URL (/api/ascii-art) para fazer uma solicitação HTTP POST quando o botão é clicado.
hx-swap : O hx-swap="outerHTML" indica que todo o conteúdo do elemento de destino deve ser substituído pela resposta da solicitação POST.
Estas são as tags que usamos aqui, além de usarmos as funções JavaScript abaixo para modificar o comportamento da 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 função é responsável por copiar o conteúdo do texto da arte ASCII para a área de transferência.
Ele cria um novo elemento textarea , define seu valor para o conteúdo de texto do elemento #ascii-art , anexa a textarea ao corpo do documento, seleciona o conteúdo, executa o comando 'copy', registra uma mensagem no console e remove a textarea do corpo do 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 função é responsável por gerar um arquivo para download contendo a arte ASCII.
Ele recupera o conteúdo de texto do elemento #ascii-art , cria um Blob (objeto binário grande) contendo o texto, cria um link ( <a> ) com uma URL apontando para o Blob, define o atributo de download como 'ascii_art.txt ', anexa o link ao corpo do documento, aciona um clique no link e remove o link do corpo do 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 função ajusta dinamicamente a visibilidade dos botões de cópia e download com base no conteúdo da arte ASCII.
Ele verifica se o conteúdo do texto cortado do elemento #ascii-art não está vazio. Se for, os botões serão configurados para serem exibidos ( 'inline-block' ), caso contrário, eles serão configurados para serem ocultos ( 'none' ).
Agora que temos a UI pronta, precisamos criar as APIs /api/ascii-art e /api/fonts . Usaremos o PageController conforme abaixo para isso:
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>" ;
}
}Certamente! Vamos detalhar a funcionalidade de ambas as APIs definidas no código Java fornecido:
/api/fonts : Esta API é chamada para fornecer uma lista de opções de fontes que podem ser usadas no gerador de arte ASCII. Ele recupera uma lista de nomes de fontes do enum Font , que faz parte da biblioteca Banana. Usando a API Java Stream, ele mapeia cada nome de fonte para um elemento HTML <option> e os anexa a um StringBuilder. O método retorna a concatenação desses elementos <option> como uma única string HTML.
/api/ascii-art : Esta API usa o texto de entrada do usuário e a fonte selecionada como parâmetros e gera arte ASCII de acordo. Ele usa o método BanaUtils.bananaify que é então usado para gerar arte ASCII com base no texto de entrada e na fonte selecionada. A arte ASCII gerada é envolvida em uma tag HTML <pre> .
Agora que temos o código, vamos executar o aplicativo. Assim que o aplicativo for iniciado, você pode acessar http://localhost:8080/ e testar o aplicativo.
Você pode verificar o código-fonte completo do aplicativo aqui? GitHub - MaheshBabu11/ascii-art-generator: Este é um gerador de arte ascii a partir de texto usando htmx e…
Além disso, ele é implantado na renderização se você quiser experimentá-lo https://ascii-art-generator.maheshbabu11.dev/
Neste artigo, construímos um gerador de arte ASCII usando HTMX e Spring Boot. O HTMX torna nossas páginas da web mais interativas e o Spring Boot fornece um backend robusto. Com isso, criamos uma ferramenta onde os usuários podem inserir texto, escolher fontes e gerar arte ASCII instantaneamente. Este projeto mostra a simplicidade e o poder de combinar HTMX e Spring Boot para aplicações web dinâmicas e envolventes.
Boa codificação?!!! Deixe um? se você gostou de ler.
