ایجاد پلاگین اتم

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

قبل از اینکه به ادامه مطلب اشاره کنم باید بگویم که شما باید با خط فرمان، برنامه‌نویسی جاوااسکریپت و HTTP آشنایی داشته باشید.

نصب Atom

ابتدای کار نیاز است که اتم را دانلود و نصب کنید تا بتوانیم به apm دسترسی داشته باشیم. apm ابزاری برای نظارت کردن و مدیریت کارایی و افزونه‌های مربوط به اتم است.

می‌توانید این کارها را با نصب اتم به صورت زیر انجام دهید:

اتم را باز کرده و به قسمت Install Shell Commands در بخش منو بروید.
برای بررسی نصب درست apm و با خبر شدن از نسخه آن و همچنین محیط‌های مرتبط از دستور apm -v استفاده کنید.

apm -v
> apm  1.9.2    
> npm  2.13.3
> node 0.10.40
> python 2.7.10
> git 2.7.4

ایجاد پکیج اولیه

در این مرحله قصد داریم ساخت پکیج مورد نظر را شروع کنیم. برای اینکار به صورت زیر عمل کنید:

محیط Command Palette را اجرا کنید. برای اینکار می‌توانید از کلید‌های CTRL+Shift+P استفاده کنید.
بعد از باز شدن این محیط نام Package Generator را جستجو کنید، حال یک پکیج جدید را براساس موارد آورده شده ایجاد کنید. بعد از اینکار با یک پیغام مواجه می‌شوید که از شما نام مربوط به پروژه را می‌خواهد. نام را وارد کنید.
روی اینتر کلیک کرده و حال پکیج اولیه شما آماده است. بعد از اینکار اتم به صورت آماده آن را باز می‌کند.

اجرای پکیج اولیه

بعد از اینکه پکیج اولیه را ایجاد کردید، قبل از اینکه وارد کدنویسی شوید آن را امتحان کنید و از درستی اجرای آن مطمئن شوید. شما باید اتم را یکبار reload کنید، با این کار اتم وجود پکیج جدید را متوجه می‌شود.

برای اینکار یکبار دیگر Command Palette را اجرا کرده و دستور Window:Reload را وارد کنید.

هربار که قصد مشاهده تغییرات و تست آن‌ها را داشته باشید باید این روند را تکرار کنید. برای مشاهده پکیجی که ساخته‌اید از قسمت Packages > Package Name را پیدا کنید. بعد از انتخاب گزینه مربوط به پکیج خودتان باید یک جعبه سیاه خالی را مشاهده کنید.

دستور toggle

toggle() {
console.log('Sourcefetch was toggled!');
return (
    this.modalPanel.isVisible() ?
    this.modalPanel.hide() :
    this.modalPanel.show()
    );
 }

به صورت کلی toggle یک تابع است که از یک ماژول گرفته شده است. این تابع از یک عملگر سه گانه برای نمایش، فراخوانی و مخفی‌سازی پنجره اپلیکیشن براساس حالت نمایش آن استفاده می‌کند.

Modal Panel: منظور از Modal Panel یک نمونه از Panel است، Panel یک المان رابط کاربری در APIهای مربوط به اتم است.

اولین تغییر

بیایید حالتی را در نظر بگیریم که در آن قصد تغییر toggle را دارید:

Change “toggle”
Change the toggle function to match the snippet below.
toggle() {
    let editor
        if (editor = atom.workspace.getActiveTextEditor()) {
        let selection = editor.getSelectedText()
        let reversed = selection.split('').reverse().join('')
        editor.insertText(reversed)
        }
     }

تغییرات‌تان را تست کنید

برای تست کردن تغییرات‌تان به صورت زیر عمل کنید:

در Command Palette دستور Window: Reload را برای Reload کردن اتم اجرا کنید.
یک فایل جدید را ایجاد کرده و هرچیزی که دوست دارید را در آن بنویسید، حال آن‌ها را با اشاره‌گر انتخاب نمایید.
دستور sourcefetch:toggle را در Command Palette اجرا کنید.

حال مشاهده خواهید کرد که متن‌تان براساس تابعی که نوشته‌اید تغییر خواهد کرد.

Atom Editor API

در کد بالا ما از api برای دسترسی پیدا کردن به متن داخل تکست ادیتور استفاده کردیم.

let editor
if (editor = atom.workspace.getActiveTextEditor()) { /* ... */
let selection = editor.getSelectedText()
let reversed = selection.split('').reverse().join('')
editor.insertText(reversed)

متن نوشته شده شما با استفاده از متدهای مربوط به رشته در جاوااسکریپت برعکس خواهد شد. در نهایت متن نوشته شده با متنی که برعکس شده جایگزین می‌شود.

کاوش در پکیج اولیه

بیایید نگاهی دقیق‌تر به پکیج اتم بیاندازیم. برای اینکار به فایل اصلی مراجعه کنید. از طریق فایل packege.json می‌توانید مشخصه مربوط به main را پیدا کنید:

"main": "./lib/sourcefetch",

رویدادها

Activate: این رویداد زمانی فراخوانده می‌شود که پکیج به صورت اولیه با استفاده از اتم بارگذاری می‌شود. این تابع برای اختصاص دادن شئ‌های مورد نیاز استفاده می‌شود.

Deactive: زمانی که پکیج غیرفعال شود ای رویداد فراخوانده می‌شود.

Serialize: این رویداد توسط اتم برای زمانی که قصد ذخیره وضعیت پکیج در بین استفاده‌ها را داشته باشیم فراخوانده می‌شود.

منبع