ascii art generator
1.0.0
이것은 htmx와 스프링 부트를 사용하는 텍스트의 ASCII 아트 생성기입니다. 이 응용 프로그램은 텍스트에서 ASCII 아트를 생성하는 데 사용할 수 있습니다. 이 애플리케이션은 spring boot와 htmx를 사용하여 구축되었습니다. 애플리케이션은 htmx를 사용하여 애플리케이션을 대화형으로 만들고 스프링 부트를 사용하여 애플리케이션을 제공합니다.
동료 개발자 여러분, 매혹적인 웹 개발 세계로의 여행에 오신 것을 환영합니다. 그곳에서 우리는 진정으로 매력적인 무언가, 즉 우리만의 ASCII 아트 생성기를 만드는 작업에 착수할 것입니다! 평범한 텍스트를 매력적인 시각 예술로 변환하는 모습을 상상해보세요. 흥미롭죠? 이 기사에서 우리는 이 비전을 현실로 만들기 위해 HTMX와 Spring Boot의 협업 마법에 대해 자세히 알아볼 것입니다.
HTMX는 단순성과 사용자 친화적인 접근 방식으로 유명한 현대 웹 개발의 마법사 지팡이와 같습니다. 프런트엔드와 백엔드를 원활하게 연결하므로 대화형 경험을 제작하는 데 완벽한 동반자가 됩니다. 이제 이를 Spring Boot 프레임워크의 견고성과 결합하면 창의성을 발휘할 수 있는 강력한 조합이 완성됩니다. HTMX에 대해 자세히 알아보려면 https://htmx.org/를 확인하세요.
우리의 주요 목표는 무엇입니까? 일반 텍스트에 감각을 더하는 ASCII 아트 생성기를 구축합니다. 좋아하는 인용문이나 간단한 메시지를 입력하고 그것이 시각적으로 놀라운 ASCII 예술 작품으로 변하는 것을 지켜보는 것을 상상해 보십시오. 이는 단지 코딩에 관한 것이 아니라 사용자에게 즐거움과 창의성을 선사하는 경험을 만드는 것입니다.
이 탐색을 통해 우리는 이 역동적인 협업의 복잡성을 밝혀낼 것입니다. 우리는 서버와 브라우저 사이의 격차를 해소하고 이러한 기술이 어떻게 협력하여 고유하고 대화형 웹 애플리케이션을 만드는지 보여줄 것입니다. 우리는 프로세스를 접근 가능하고, 즐겁고, 가장 중요하게는 사용자 친화적으로 만드는 데 중점을 둘 것입니다.
자, 시작해 봅시다! start.spring.io로 이동하여 아래와 같이 프로젝트를 구성해 보겠습니다.
이 프로젝트에서는 Java 17을 사용할 예정입니다. 여기서 사용하는 종속성은 다음과 같습니다.
**Spring Web: **컨트롤러, DispatcherServlet 및 View Resolver와 같은 필수 구성 요소를 제공하여 HTTP 요청 처리 구성 및 MVC(모델-뷰-컨트롤러) 아키텍처 구현을 용이하게 합니다.
Thymeleaf : 서버 측 Java 템플릿 엔진인 Thymeleaf는 Spring Boot의 웹 개발과 종종 결합되는 주요 종속성입니다. 뷰 템플릿 엔진으로 작동하는 Thymeleaf는 개발자가 HTML 템플릿 내에 표현적 구성을 직접 삽입하여 동적 및 대화형 웹 페이지를 만들 수 있도록 지원합니다.
우리는 더 작은 ASCII 문자 집합으로 구성된 문자로 구성된 다양한 서체의 텍스트 배너를 생성하는 Java용 Figlet 유틸리티인 Banana 라는 라이브러리를 사용할 것입니다. 여기에서 확인할 수 있습니다: https://github.com/yihleego/banana
이제 선택한 IDE에서 프로젝트를 열어보겠습니다. Intellij Idea를 사용할 예정입니다.
pom.xml에도 바나나 라이브러리 종속성을 추가하세요.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
이제 애플리케이션 코딩을 시작해 보겠습니다. 참고로 아래 폴더 구조를 이용해주세요
템플릿 디렉토리에 다음과 같은 UI 템플릿을 만들었습니다(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 >이 파일은 스타일 지정을 위한 Tailwind CSS 프레임워크와 프런트 엔드와 백 엔드 간의 원활한 상호 작용을 위한 HTMX 라이브러리를 통합하는 ASCII Art Generator의 웹 페이지를 나타냅니다. 코드의 주요 구성 요소와 기능을 분석해 보겠습니다.
Tailwind CSS 스타일시트는 스타일 지정을 위해 CDN에서 연결됩니다.
HTMX 라이브러리는 CDN에 연결되어 있습니다. HTMX는 전체 페이지를 다시 로드하지 않고도 동적 요청을 만들고 페이지 콘텐츠를 업데이트하는 데 사용됩니다.
여기서는 위에서부터 여러 HTMX 태그를 사용하고 있습니다.
hx-get : hx-get 속성은 지정된 hx-trigger 이벤트가 발생할 때 HTTP GET 요청을 만들기 위한 URL(/api/fonts)을 지정합니다.
hx-trigger : 이 hx-trigger="load"는 페이지가 로드될 때 GET 요청이 트리거되어야 함을 나타냅니다.
hx-target : hx-target="#font-select"는 ID가 글꼴 선택인 HTML 요소를 GET 요청의 응답으로 업데이트할 대상으로 지정합니다. 이 경우 글꼴 옵션을 드롭다운에 동적으로 로드합니다.
hx-post : hx-post 속성은 버튼을 클릭할 때 HTTP POST 요청을 만들기 위한 URL(/api/ascii-art)을 지정합니다.
hx-swap : hx-swap="outerHTML"은 대상 요소의 전체 콘텐츠가 POST 요청의 응답으로 대체되어야 함을 나타냅니다.
이는 페이지 동작을 수정하기 위해 아래 JavaScript 함수를 사용하는 것 외에 여기에서 사용한 태그입니다.
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 )
}이 함수는 ASCII 아트의 텍스트 내용을 클립보드에 복사하는 역할을 합니다.
새로운 textarea 요소를 생성하고, 그 값을 #ascii-art 요소의 텍스트 콘텐츠로 설정하고, 문서 본문에 textarea 추가하고, 콘텐츠를 선택하고, 'copy' 명령을 실행하고, 콘솔에 메시지를 기록하고, 제거합니다. 문서 본문의 textarea .
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 )
}이 함수는 ASCII 아트가 포함된 다운로드 가능한 파일을 생성하는 역할을 합니다.
#ascii-art 요소의 텍스트 콘텐츠를 검색하고, 텍스트가 포함된 Blob (바이너리 대형 객체)을 생성하고, Blob을 가리키는 URL이 있는 링크( <a> )를 생성하고, 다운로드 속성을 'ascii_art.txt로 설정합니다. ', 문서 본문에 링크를 추가하고, 링크 클릭을 유발하고, 문서 본문에서 링크를 제거합니다.
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'
}이 기능은 ASCII 아트의 내용을 기반으로 복사 및 다운로드 버튼의 가시성을 동적으로 조정합니다.
#ascii-art 요소의 잘린 텍스트 내용이 비어 있지 않은지 확인합니다. 그렇다면 버튼은 표시되도록 설정되고( 'inline-block' ), 그렇지 않으면 숨겨지도록 설정됩니다( 'none' ).
이제 API /api/ascii-art 및 /api/fonts 를 생성하는 데 필요한 UI가 준비되었습니다. 이를 위해 아래와 같이 PageController를 사용합니다.
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>" ;
}
}틀림없이! 제공된 Java 코드에 정의된 두 API의 기능을 분석해 보겠습니다.
/api/fonts : 이 API는 ASCII 아트 생성기에서 사용할 수 있는 글꼴 옵션 목록을 제공하기 위해 호출됩니다. Banana 라이브러리의 일부인 Font 열거형에서 글꼴 이름 목록을 검색합니다. Java Stream API를 사용하여 각 글꼴 이름을 HTML <option> 요소에 매핑하고 이를 StringBuilder에 추가합니다. 이 메서드는 이러한 <option> 요소의 연결을 단일 HTML 문자열로 반환합니다.
/api/ascii-art : 이 API는 사용자 입력 텍스트와 선택한 글꼴을 매개변수로 사용하고 그에 따라 ASCII 아트를 생성합니다. 그런 다음 BanaUtils.bananaify 메서드를 사용하여 입력 텍스트와 선택한 글꼴을 기반으로 ASCII 아트를 생성합니다. 생성된 ASCII 아트는 <pre> HTML 태그로 래핑됩니다.
이제 코드가 있으므로 애플리케이션을 실행해 보겠습니다. 애플리케이션이 시작되면 http://localhost:8080/으로 이동하여 애플리케이션을 시험해 볼 수 있습니다.
여기에서 애플리케이션의 전체 소스 코드를 확인할 수 있습니다. GitHub - MaheshBabu11/ascii-art-generator: htmx 및…
또한 https://ascii-art-generator.maheshbabu11.dev/를 시험해보고 싶다면 렌더링에 배포됩니다.
이 기사에서는 HTMX와 Spring Boot를 사용하여 ASCII 아트 생성기를 구축했습니다. HTMX는 웹페이지를 보다 대화형으로 만들고 Spring Boot는 강력한 백엔드를 제공합니다. 이를 통해 우리는 사용자가 텍스트를 입력하고 글꼴을 선택하고 즉시 ASCII 아트를 생성할 수 있는 도구를 만들었습니다. 이 프로젝트는 역동적이고 매력적인 웹 애플리케이션을 위해 HTMX와 Spring Boot를 결합하는 단순성과 강력한 기능을 보여줍니다.
즐거운 코딩 되셨나요?!!! ? 재미있게 읽으셨다면.
