هذا هو منشئ فن ascii من النص باستخدام htmx وspring boot. يمكن استخدام هذا التطبيق لإنشاء فن ascii من النص. تم إنشاء التطبيق باستخدام Spring Boot وHTMX. يستخدم التطبيق htmx لجعل التطبيق تفاعليًا والتمهيد الربيعي لخدمة التطبيق.
مرحبًا بكم، زملائي المطورين، في رحلة إلى عالم تطوير الويب الرائع، حيث نحن على وشك الشروع في إنشاء شيء جذاب حقًا - مولد فن ASCII الخاص بنا! تصور هذا: أخذ نص عادي وتحويله إلى فن بصري آسر. مثيرة، أليس كذلك؟ في هذه المقالة، سنتعمق في السحر التعاوني لـ HTMX وSpring Boot لجعل هذه الرؤية حقيقة.
إن HTMLX يشبه عصا المعالج في تطوير الويب الحديث، فهو معروف ببساطته وأسلوبه السهل الاستخدام. فهو يربط بين الواجهة الأمامية والخلفية بسلاسة، مما يجعله الرفيق المثالي لصياغة التجارب التفاعلية. الآن، قم بإقران ذلك بمتانة إطار عمل Spring Boot، وستحصل على مجموعة قوية جاهزة لإطلاق العنان للإبداع. لمعرفة المزيد حول HTML يمكنك مراجعة https://htmx.org/
هدفنا الرئيسي؟ لإنشاء منشئ فني ASCII يضيف لمسة من الذوق إلى النص العادي. تخيل أنك تكتب اقتباسك المفضل أو رسالة بسيطة، وتشاهده وهو يتحول إلى قطعة فنية مذهلة من فن ASCII. لا يقتصر الأمر على البرمجة فحسب، بل يتعلق أيضًا بإنشاء تجربة تجلب الفرح والإبداع للمستخدم.
خلال هذا الاستكشاف، سنكشف عن تعقيدات هذا التعاون الديناميكي. سنقوم بسد الفجوة بين الخادم والمتصفح، ونوضح كيفية عمل هذه التقنيات جنبًا إلى جنب لإنشاء تطبيق ويب فريد وتفاعلي. سنركز على جعل العملية سهلة الوصول وممتعة، والأهم من ذلك، سهلة الاستخدام.
لذلك، دعونا نبدأ! دعنا ننتقل إلى start.spring.io ونقوم بتكوين المشروع كما هو موضح أدناه:
سنستخدم Java 17 لهذا المشروع. التبعيات التي نستخدمها هنا هي:
**Spring Web: **يوفر مكونات أساسية مثل وحدات التحكم وDispatcherServlet وView Resolver، مما يسهل تنظيم معالجة طلبات HTTP وتنفيذ بنية وحدة التحكم في عرض النموذج (MVC).
Thymeleaf : Thymeleaf، وهو محرك قالب Java من جانب الخادم، هو تبعية رئيسية غالبًا ما تقترن بتطوير الويب الخاص بـ Spring Boot. يعمل Thymeleaf كمحرك قالب عرض، وهو يمكّن المطورين من إنشاء صفحات ويب ديناميكية وتفاعلية عن طريق تضمين بنيات معبرة مباشرة داخل قوالب HTML.
سنستخدم مكتبة تسمى Banana وهي أداة مساعدة FIGlet لـ Java والتي تولد لافتات نصية، في مجموعة متنوعة من الخطوط، وتتكون من أحرف مكونة من مجموعات من أحرف ASCII الأصغر. يمكنك التحقق من ذلك هنا: https://github.com/yihleego/banana
الآن دعونا نفتح المشروع في IDE الذي تختاره. سأستخدم Intellij Idea.
أضف تبعية مكتبة Banana إلى pom.xml الخاص بك أيضًا.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
لنبدأ الآن في ترميز التطبيق. الرجاء استخدام بنية المجلد أدناه كمرجع
لقد قمت بإنشاء قالب واجهة المستخدم في دليل القالب والذي يبدو مثل هذا (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 >
يمثل هذا الملف صفحة الويب الخاصة بـ ASCII Art Generator، ويتضمن إطار عمل Tailwind CSS للتصميم ومكتبة HTMX للتفاعل السلس بين الواجهة الأمامية والخلفية. دعنا نحلل المكونات والوظائف الرئيسية للكود:
يتم ربط ورقة أنماط Tailwind CSS من CDN لأغراض التصميم.
ترتبط مكتبة HTMLX بشبكة CDN. يتم استخدام HTML لتقديم الطلبات الديناميكية وتحديث محتوى الصفحة دون إعادة تحميل الصفحة بالكامل.
نحن نستخدم العديد من علامات HTML هنا بدءًا من الأعلى
hx-get : تحدد السمة hx-get عنوان URL (/api/fonts) لتقديم طلب HTTP GET عند وقوع الحدث المحدد hx-trigger.
hx-trigger : يشير hx-trigger = "load" إلى أنه يجب تشغيل طلب GET عند تحميل الصفحة.
hx-target : يقوم Thehx-target="#font-select" بتعيين عنصر HTML مع تحديد خط المعرف كهدف للتحديث مع الاستجابة من طلب GET. في هذه الحالة، يقوم بتحميل خيارات الخط ديناميكيًا في القائمة المنسدلة.
hx-post : تحدد سمة hx-post عنوان URL (/api/ascii-art) لتقديم طلب HTTP POST عند النقر فوق الزر.
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
بنص المستند، ويحدد المحتوى، وينفذ أمر "نسخ"، ويسجل رسالة إلى وحدة التحكم، ويزيل 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
(كائن ثنائي كبير) يحتوي على النص، وإنشاء رابط ( <a>
) مع عنوان URL يشير إلى Blob، وتعيين سمة التنزيل على "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/ascii-art و /api/fonts . سوف نستخدم 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/fonts : يتم استدعاء واجهة برمجة التطبيقات هذه لتوفير قائمة بخيارات الخطوط التي يمكن استخدامها في منشئ رسومات ASCII. يقوم باسترداد قائمة بأسماء الخطوط من تعداد الخط ، الذي يعد جزءًا من مكتبة Banana. باستخدام Java Stream API، يقوم بتعيين كل اسم خط إلى عنصر HTML <option>
وإلحاقه بـ StringBuilder. تقوم الطريقة بإرجاع تسلسل عناصر <option>
هذه كسلسلة HTML واحدة.
/api/ascii-art : تأخذ واجهة برمجة التطبيقات هذه نص إدخال المستخدم والخط المحدد كمعلمات وتقوم بإنشاء رسم ASCII وفقًا لذلك. يستخدم طريقة BanaUtils.bananaify ثم يتم استخدامه لإنشاء فن ASCII بناءً على نص الإدخال والخط المحدد. يتم تغليف رسم ASCII الذي تم إنشاؤه بعلامة HTML <pre>
.
والآن بعد أن حصلنا على الكود، فلنقم بتشغيل التطبيق. بمجرد بدء التطبيق، يمكنك الانتقال إلى http://localhost:8080/ وتجربة التطبيق.
يمكنك التحقق من كود المصدر الكامل للتطبيق هنا؟ GitHub - MaheshBabu11/ascii-art-generator: هذا هو مولد فنون ascii من النص باستخدام htmx و...
كما يتم نشره عند العرض إذا كنت تريد تجربته https://ascii-art-generator.maheshbabu11.dev/
في هذه المقالة، قمنا ببناء مولد فني لـ ASCII باستخدام HTMLX وSpring Boot. تعمل تقنية HTMLX على جعل صفحات الويب الخاصة بنا أكثر تفاعلية، ويوفر Spring Boot واجهة خلفية قوية. باستخدام هذه، قمنا بإنشاء أداة حيث يمكن للمستخدمين إدخال النص، واختيار الخطوط، وإنشاء رسم ASCII على الفور. يعرض هذا المشروع بساطة وقوة الجمع بين HTMLX وSpring Boot لتطبيقات الويب الديناميكية والجذابة.
الترميز سعيد؟!!! ترك ؟ إذا استمتعت بقراءتها.