ascii art generator
1.0.0
Ini adalah generator seni ascii dari teks menggunakan htmx dan spring boot. Aplikasi ini dapat digunakan untuk menghasilkan seni ascii dari teks. Aplikasi ini dibangun menggunakan spring boot dan htmx. Aplikasi ini menggunakan htmx untuk membuat aplikasi menjadi interaktif dan spring boot untuk melayani aplikasi.
Selamat datang, rekan-rekan pengembang, dalam perjalanan menuju dunia pengembangan web yang menakjubkan, tempat kita akan mulai menciptakan sesuatu yang benar-benar menarik — generator seni ASCII milik kita sendiri! Bayangkan ini: mengambil teks biasa dan mengubahnya menjadi seni visual yang menawan. Menyenangkan, bukan? Dalam artikel ini, kita akan menyelami keajaiban kolaboratif HTMX dan Spring Boot untuk mewujudkan visi ini.
HTML seperti tongkat sihir pengembangan web modern, dikenal karena kesederhanaan dan pendekatannya yang ramah pengguna. Ini menghubungkan ujung depan dan belakang dengan mulus, menjadikannya pendamping yang sempurna untuk menciptakan pengalaman interaktif. Sekarang, pasangkan hal tersebut dengan kekokohan kerangka Spring Boot, dan Anda akan mendapatkan kombinasi hebat yang siap melepaskan kreativitas. Untuk mempelajari lebih lanjut tentang HTML, Anda dapat memeriksa https://htmx.org/
Tujuan utama kami? Untuk membuat generator seni ASCII yang menambahkan sentuhan unik pada teks biasa. Bayangkan mengetikkan kutipan favorit Anda atau pesan sederhana, dan melihatnya berubah menjadi karya seni ASCII yang menakjubkan secara visual. Ini bukan hanya tentang pengkodean — ini tentang menciptakan pengalaman yang menghadirkan kegembiraan dan kreativitas bagi pengguna.
Sepanjang eksplorasi ini, kami akan mengungkap seluk-beluk kolaborasi dinamis ini. Kami akan menjembatani kesenjangan antara server dan browser, menunjukkan bagaimana teknologi ini bekerja sama untuk menciptakan aplikasi web yang unik dan interaktif. Kami akan fokus untuk menjadikan prosesnya mudah diakses, menyenangkan, dan, yang paling penting, ramah pengguna.
Jadi, mari kita mulai! Mari kita menuju ke start.spring.io dan mengkonfigurasi proyek seperti yang ditunjukkan di bawah ini:
Kami akan menggunakan Java 17 untuk proyek ini. Dependensi yang kami gunakan di sini adalah:
**Spring Web: **Ini menyediakan komponen penting seperti pengontrol, DispatcherServlet, dan View Resolver, memfasilitasi organisasi penanganan permintaan HTTP dan implementasi arsitektur model-view-controller (MVC).
Thymeleaf : Thymeleaf, mesin templat Java sisi server, adalah ketergantungan utama yang sering digabungkan dengan pengembangan web Spring Boot. Berfungsi sebagai mesin templat tampilan, Thymeleaf memberdayakan pengembang untuk membuat halaman web yang dinamis dan interaktif dengan menyematkan konstruksi ekspresif langsung dalam templat HTML.
Kita akan menggunakan perpustakaan bernama Banana yang merupakan utilitas FIGlet untuk Java yang menghasilkan spanduk teks, dalam berbagai jenis huruf, terdiri dari huruf-huruf yang terdiri dari konglomerasi karakter ASCII yang lebih kecil. Anda dapat memeriksanya di sini: https://github.com/yihleego/banana
Sekarang mari kita buka proyek di IDE pilihan Anda. Saya akan menggunakan Intellij Idea.
Tambahkan juga ketergantungan perpustakaan Banana ke pom.xml Anda.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Sekarang mari kita mulai mengkodekan aplikasi. Silakan gunakan struktur folder di bawah ini untuk referensi
Saya telah membuat template UI di direktori template yang terlihat seperti ini (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 >File ini mewakili halaman web untuk ASCII Art Generator, yang menggabungkan kerangka kerja Tailwind CSS untuk penataan gaya dan pustaka HTMX untuk interaksi yang lancar antara ujung depan dan ujung belakang. Mari kita uraikan komponen utama dan fungsionalitas kodenya:
Stylesheet Tailwind CSS ditautkan dari CDN untuk tujuan penataan gaya.
Pustaka HTML ditautkan ke CDN. HTML digunakan untuk membuat permintaan dinamis dan memperbarui konten halaman tanpa memuat ulang halaman penuh.
Kami menggunakan beberapa tag HTML di sini mulai dari atas
hx-get : Atribut hx-get menentukan URL (/api/fonts) untuk membuat permintaan HTTP GET ketika peristiwa yang ditentukan hx-trigger terjadi.
hx-trigger : Hx-trigger="load" ini menunjukkan bahwa permintaan GET harus dipicu saat halaman dimuat.
hx-target : Thehx-target="#font-select" menunjuk elemen HTML dengan ID font-select sebagai target pembaruan dengan respons dari permintaan GET. Dalam hal ini, ini memuat opsi font secara dinamis ke dalam dropdown.
hx-post : Atribut hx-post menentukan URL (/api/ascii-art) untuk membuat permintaan HTTP POST ketika tombol diklik.
hx-swap : hx-swap="outerHTML" menunjukkan bahwa seluruh konten elemen target harus diganti dengan respons dari permintaan POST.
Ini adalah tag yang kami gunakan di sini selain itu kami menggunakan fungsi JavaScript di bawah ini untuk mengubah perilaku halaman
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 )
}Fungsi ini bertanggung jawab untuk menyalin konten teks seni ASCII ke clipboard.
Ini membuat elemen textarea baru, menetapkan nilainya ke konten teks elemen #ascii-art , menambahkan textarea ke badan dokumen, memilih konten, menjalankan perintah 'salin', mencatat pesan ke konsol, dan menghapus textarea dari badan dokumen.
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 )
}Fungsi ini bertanggung jawab untuk menghasilkan file yang dapat diunduh yang berisi seni ASCII.
Ini mengambil konten teks dari elemen #ascii-art , membuat Blob (objek biner besar) yang berisi teks, membuat tautan ( <a> ) dengan URL yang mengarah ke Blob, menyetel atribut unduhan ke 'ascii_art.txt ', menambahkan tautan ke badan dokumen, memicu klik pada tautan, dan menghapus tautan dari badan dokumen.
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'
}Fungsi ini secara dinamis menyesuaikan visibilitas tombol salin dan unduh berdasarkan konten seni ASCII.
Ia memeriksa apakah konten teks yang dipangkas dari elemen #ascii-art tidak kosong. Jika ya, tombol disetel untuk ditampilkan ( 'inline-block' ), jika tidak, tombol disetel untuk disembunyikan ( 'none' ).
Sekarang kita sudah menyiapkan UI, kita perlu membuat API /api/ascii-art dan /api/fonts . Kami akan menggunakan PageController seperti di bawah ini:
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>" ;
}
}Tentu! Mari kita uraikan fungsi kedua API yang ditentukan dalam kode Java yang disediakan:
/api/fonts : API ini dipanggil untuk menyediakan daftar opsi font yang dapat digunakan di generator seni ASCII. Ini mengambil daftar nama font dari Font enum, yang merupakan bagian dari perpustakaan Banana. Dengan menggunakan Java Stream API, ia memetakan setiap nama font ke elemen <option> HTML dan menambahkannya ke StringBuilder. Metode ini mengembalikan rangkaian elemen <option> ini sebagai string HTML tunggal.
/api/ascii-art : API ini mengambil teks input pengguna dan font yang dipilih sebagai parameter dan menghasilkan seni ASCII yang sesuai. Ini menggunakan metode BanaUtils.bananaify yang kemudian digunakan untuk menghasilkan seni ASCII berdasarkan teks input dan font yang dipilih. Seni ASCII yang dihasilkan dibungkus dengan tag HTML <pre> .
Sekarang kita memiliki kodenya, mari kita jalankan aplikasinya. Setelah aplikasi dijalankan, Anda dapat mengunjungi http://localhost:8080/ dan mencoba aplikasi tersebut.
Anda dapat memeriksa kode sumber lengkap aplikasi di sini? GitHub - MaheshBabu11/ascii-art-generator: Ini adalah generator seni ascii dari teks menggunakan htmx dan…
Selain itu, ini diterapkan pada render jika Anda ingin mencobanya https://ascii-art-generator.maheshbabu11.dev/
Pada artikel ini, kami telah membuat generator seni ASCII menggunakan HTMX dan Spring Boot. HTMX membuat halaman web kami lebih interaktif, dan Spring Boot menyediakan backend yang kuat. Dengan ini, kami telah membuat alat di mana pengguna dapat memasukkan teks, memilih font, dan langsung menghasilkan karya seni ASCII. Proyek ini menampilkan kesederhanaan dan kekuatan menggabungkan HTMX dan Spring Boot untuk aplikasi web yang dinamis dan menarik.
Selamat Mengkode?!!! Tinggalkan? jika Anda menikmati membacanya.
