چگونه من بدون ترک ترمینال یک TUI ساختم

TUI حتی به چه معنی است؟

پایانه ها راهی بسیار پیچیده و در عین حال سریع برای تعامل با سیستم و هر کار بدون ترک ترمینال هستند … همیشه. TUI مخفف رابط کاربری ترمینال است. در اصل ، این راهی برای استفاده از برخی از ویژگی های نرم افزاری به طور مستقیم از ترمینال با یک رابط کاربری- مهارکننده است و از صفحه کلید برای کنترل همه چیز استفاده می کند.

من می دانم که شما ممکن است در ابتدا آن را درک نکنید ، زیرا پایانه ها به روش خاص خود پیچیده هستند. بنابراین ، این یک قدم به جلو است.

PS: در این مقاله ، انتظار زیادی از تجربه یادگیری ندارید ، بیشتر در مورد من است که پروژه ای را که برای ترمینال ساخته ام نشان می دهم. و قطعاً در حرفه خود به شما کمک نمی کند. هاها بنابراین عاقلانه ادامه دهید.

چرا توی مهم است

ما در دنیایی زندگی می کنیم که همه چیز گرافیکی ، چشمک زن است و برای باز کردن یک برنامه یادداشت برداری به 12 گیگابایت رم نیاز دارد (قطعاً مفهوم را هدف قرار ندهید). اما گاهی اوقات ، خام بودن قدرت است. پایانه ها این خستگی را به شما می دهند.

این فقط مربوط به نوستالژی نیست یا برای تفریح ​​گیک بودن است. ابزارهای TUI عبارتند از:

• پرشور سریع (مثل فوری جدی)

• صفحه کلید محور ، بنابراین دستان شما هرگز کلیدها را ترک نمی کنند و موش را فراموش نمی کنند حتی وجود دارد

• غالباً بیشتر قابل توصیف و آهنگسازی است

• سبک وزن دارد و می توانید روی توستر (یا سیب زمینی ، اگر آنها را ترجیح دهید)

برای Devs ، Sysadmins ، سرگرمی ها و حتی مینیمالیست ها ، Tui فقط یک UI نیست – این یک فلسفه است.

و اگر می توانید خود را بسازید (حتی اگر کاملاً صیقلی نباشد)؟ لعنت درست هنوز ارزش انعطاف پذیری را دارد.

من چه کار کردم؟

چندی پیش ، در جایی در فوریه سال 2024 ، من ایده ای برای ساخت خودم یک پلت فرم پخش موسیقی گرفتم ، “CAZ در آن زمان من با توسعه وب Frontend خوب بودم. اما من می خواستم بیشتر گسترش دهم ، و بهترین راه برای یادگیری از تجربه دستی چیست؟ اینگونه است که من شروع به یادگیری باطن کردم. سریع 6-7 ماه به جلو ، برنامه وب من آماده بود. من روزی کل گردش کار را در برخی از وبلاگ های دیگر توضیح خواهم داد. در حال حاضر ، شما می توانید به GitHub در اینجا مراجعه کنید.

بنابراین ، از اینجا من یک ایده دریافت کردم-چرا از پس زمینه سفارشی (که من در بالای یک پروژه منبع باز در اینجا ساخته ام-نمی توانم به خاطر بیاورم که آیا V2 یا V3 بود. IDK) و یک رابط کاربری ترمینال برای کنترل موسیقی مستقیم از ترمینال ایجاد کردم؟ (از آنجا که سایر پروژه های منبع باز مربوط به Spotify TUI بودند و به یک حساب پرداخت شده با Spotify Open در پس زمینه نیاز داشتند). اما من به چیزی بر اساس مورد استفاده خود نیاز داشتم ، که می توانم در پس زمینه اجرا کنم در حالی که در جلسات برنامه نویسی گم شدم و 60 ٪ از قوچ من را نخوردبشر من به چیزی مانند یک دستور برای اجرای نیاز داشتم و می توانم هر آهنگی را که می خواهم مستقیم از خود ترمینال پخش کنم. از این گذشته ، این جالبترین راه برای پخش موسیقی شما از ترمینال خواهد بود!

یادداشت: فقط صادقانه بگویم – همانطور که فکر می کنید “جریان” نمی کند. پس زمینه سفارشی من (ساخته شده در بالای Jiosaavn) URL آهنگ کامل را می گیرد. سپس من فقط آن آدرس را به mpv، یک بازیکن رسانه ای. ساده و مؤثر ، اما در عین حال مانند جذابیت کار می کند.

مدتی است که این پروژه فقط در لیست کارهای من بیکار نشسته بود در حالی که من تحقیقات خود را در مورد یافتن روشی مناسب که می توانم انجام دهم انجام دادم. و این زمانی است که جوهر را پیدا کردم. این راهی است که می توانم از React برای برنامه های خط فرمان تعاملی استفاده کنم. بله ، قدیمی است اما یک پروژه منبع باز و مستند است. من فهمیدم که این مناسب برای مورد استفاده من است ، “CAZ من JS/TS را به خوبی می شناختم و در React خود تجربه خوبی داشتم. بنابراین ، من اعتقاد داشتم که ساخت آن سرگرم کننده خواهد بود. همچنین ، من نتوانستم کسی را پیدا کنم که این رویکرد را برای ساختن یک TUI بسیار مزاحم با React و جوهر به طور خاص پیدا کند ، بنابراین یا من تاریخ می سازم یا یک قدم نزدیکتر به آن مرد دیوانه هستم. وضعیت برد-برد هاها.

بنابراین ، من همه وارد شدم. واقعاً نمی توانم به یاد بیاورم که چه مدت طول کشید تا ساختم – جایی در حدود یک ماه.

اوه گه … تمام این مدت صحبت کرده ام و به شما نگفتم که من آن را نامگذاری کردم: جرقه های جرقه ایبشر هیه

پشته فنی

زبانها و ابزارها:

• nodejs + typcript

• جوهر و جوهر

• MPV (برای پخش موسیقی)

• پس زمینه سفارشی (بالای Jiosaavn)

• جابجایی سوکت و FS در گره برای ارتباط با MPV

• در Termux (Android) کار می کند (ناپایدار)

• VIM/Google IDX (اکنون استودیوی Firebase)

برخی از ویژگی ها هنوز اجرا نشده اند ، اما عملکرد اساسی حاصل شده است ، اگرچه ممکن است اشکالات ناشناخته وجود داشته باشد. شما می توانید در اینجا گزارش دهید ، و احتمالاً من هرگز آنها را برطرف نمی کنم. هه ، بنابراین سعی کنید خودتان برخی از کارها را انجام دهید و از کمک های خود استقبال می شود.

ساخت UI

قطعاً ، React + Ink رویکرد ساخت ابزار را ساده تر کرد ، زیرا من توانستم از دانش قبلی توسعه وب استفاده کنم و نه از منحنی یادگیری. این قطعاً چیزی بود که ارزش آن را داشت. من می دانم که مردم می گویند خوب نیست ، معماری طراحی/سیستم مکیده است ، باید از زنگ زدگی یا ncurses یا چیز مشابه و غیره استفاده می کرد. قطعاً با برخی از موارد موافقم ، اما دلیل ایجاد آن برای حل مسئله ای بود که نتوانستم راه حلی برای هر جایی پیدا کنم. بنابراین من آن را برای خودم ایجاد کردم ، و این به هدف و همانطور که انتظار می رود خدمت می کند. همچنین ، Rust یا Ncurses منحنی یادگیری شیب دار را معرفی می کند.

محیط کار من

من در حالی که این کار را می کردم بیشتر از VIM استفاده کردم. من repo جوهر را کلون کردم تا اسناد را در کنار هم بخوانم. قطعاً ارزشش را دارد. خود Vim یک مهارت است ، اگرچه برای کدگذاری واقعی چندان مناسب نیست ، و با NVIM احساس بار می کند. بنابراین من برای توسعه چرخ دنده ها را به یک Cloud IDE (Google IDX) تغییر دادم و این باعث افزایش سرعت کدگذاری من ، به خصوص با مدیریت بسته NIX شد.

چالش های موجود در سفر

بزرگترین چالشی که با آن روبرو شدم ، گرفتن نوعی راه برای پخش موسیقی بود. بنابراین من ساده ترین مسیر را انتخاب کردم – من مستقیماً آن را با MPV پیاده سازی کردم و سیاهههای مربوط به MPV (که دارای نشانگر زمانی بود ، که من به آن نیاز داشتم) را به یک پرونده ورود به سیستم در زیر .sparklines پوشه ، و آن را با یک سوکت (یک نقطه پایانی ارتباطی دو طرفه برای رسیدگی به دستورات سفارشی) مدیریت کرد. با قدرت Nodejs ، من آن را عملی کردم و به نوعی خیلی بهتر از آنچه انتظار می رفت معلوم شد. همچنین ، به پرونده های پیکربندی می توان در .sparklines/configبشر

مطمئناً ، جوهر چیزی جلوتر از زمان خود بود. این همه چیز را برای ساختن چیزی شبیه به این دارد. حداقل برای سرگرمی من هنگام کار با خود UI با چالش هایی روبرو شدم ، اگرچه مدتی طول کشید تا آن را کمال کنم و آن را مدولار کنم و با میانبرهای سفارشی کار کنم. بسته بندی یک کار بسیار ساده و سریع بود.

BTW ، شما می توانید آن را مستقیماً با استفاده از آن دریافت کنید npm i sparklines-tui -gبشر

برخی از ویژگی ها

• موسیقی را مستقیماً از ترمینال کنترل کنید

• قابلیت ورود/ثبت نام

• تعامل مبتنی بر کلید API با پشتی جرقه

• پخش مداوم (هنوز هم اشکال) و نوار پخش تمیز

• میانبرهای سفارشی و منوی راهنما (Alt+H)

• آهنگ ها ، آلبوم ها و هنرمندان را جستجو کنید

• انتخاب کننده زبان موسیقی

• توصیه ها و بازی بی نهایت (کار در حال انجام) [TODO]

• حلقه ، تغییر ، صف و پشتیبانی اشعار (به زودی) [TODO]

• NPM بسته بندی شده و روی Termux کار می کند (تا حدی)

برای نصب ، به اسناد مراجعه کنید.

منوی راهنما

برخی از دستورات مفید (از طریق Alt + H قابل دسترسی است):

Tab                 → Navigate between sections  
Spacebar            → Toggle between play and pause  
Enter               → Select the selected item  
Ctrl + m            → Mute/unmute the audio  
Ctrl + x            → Hide other section  
Ctrl + z            → Toggle search  
Ctrl + a/s/d/f      → Focus on menu/playlists/simulation/other section  
Ctrl + k/l/;        → Toggle between search/lyrics/queue section  
↑ and ↓             → Navigate up and down between items  
] or [              → Increase/decrease volume by 5  
Ctrl + ➡ / Ctrl + ⬅ → Seek forward/backward by 5 seconds  
Ctrl + ➡ / Ctrl + ⬅ → Increase/decrease speed by 0.2x  
Alt + h             → Display/close this help menu  
Esc                 → Quit the app

افکار نهایی

من انتظار ندارم کسی مراقبت کند (اما شما باید اهمیت دهید). راستش ، این بیشتر برای من بود. برای یادگیری ، آزمایش ، برای دیدن اینکه آیا می توانم محدودیت های UI ترمینال را در JS فشار دهم. و این کار را کرد. و این بیشتر مهم است. اگر در حال ساختن چیزی هستید و شما را هیجان زده می کند ، پس حتی اگر کسی دیگر نپردازد ، هنوز برنده شده اید.
اجازه دهید افکار شما در نظرات جریان یابد.

تا دفعه بعد در ترمینال بمانید. صلح

در اصل در https://blog.samay15jan.xyz منتشر شده است