آموزش مقدماتی کار با Electron برای ساخت نرم‌افزارهای Desktop



visibility  
mode_comment   ۰

در این مطلب میخوام بصورت مقدماتی کار با Electron رو بهتون آموزش بدم تا بتونین با استفاده از معلوماتی که در زمینه طراحی وب دارید، نرم‌افزارهای Desktop برای سیستم عاملهای Linux و OSX و Windows رو به وجود بیارید.

Electron چیست؟

Electron یک ابزار رایگان Open source هست که توسط Github توسعه داده شده است و با استفاده از اون میتونین نرم‌افزارهای cross-platform رو با استفاده از HTML و CSS و Javascript به وجود بیارید.

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

  • Slack
  • Atom
  • Visual studio code
  • Calypso مربوط به WordPress.com
  • Discord

Electron یک پروژه بزرگ و پرطرفدار هست که در حال حاضر نسخه اصلی اون 3 هست و به زودی نسخه 4 اون نیز منتشر خواهد شد.

دنیای قبل از Electron

قبل از معرفی شدن الکترون امکان به وجود آوردن نرم‌افزارهای Cross-platform که بر روی همه سیستم عاملها کار کنه وجود نداشت و اگر هم وجود داشت خیلی سخت بوده یا فقط بعضی از سیستم عاملها رو تحت پوشش قرار میدادن.

در Mac فریم‌ورک‌هایی مثل MacGap وجود داشت که با استفاده از اون میتونستین برنامه‌هایی که با استفاده از HTML و CSS و Javascript نوشتید رو در WebView مربوط به مرورگر Safari نمایش بدین. وقتی این Application به وجود میاد دیگه فقط بر روی سیستم عامل OSX اجرا میشه و امکان اینکه بر روی سیستم عاملهای Linux و Windows اجرا بشه، وجود ندارد.

قبل ازالکترون نرم‌افزار خاصی که یک برنامه رو بصورت یکسان در همه سیستم عاملها اجرا کند، وجود نداشت.

در سال 2014 اولین نسخه الکترون با نام Atom shell منتشر شد و در سال 2015 به Electron تغییر نام پیدا کرد.

نگاهی به ساختار درونی Electron

Electron ترکیبی از Nodejs و Chromium می‌باشد. Nodejs رو که دیگه همه شما میشناسید و Chromium هم یک پروژه متن‌باز یا Open source هست که توسط Google توسعه داده شده و شباهتهای زیادی به Google chrome داره و در تعدادی از ویژگی‌ها و لوگو با هم تفاوت دارند.

شما میتونین به همه امکانات Chromium دسترسی داشته باشید و همچنین از موتور V8 مربوط به Javascript و همچنین از بسته و ماژولهای مختلف Nodejs استفاده کنید. شما میتونین هر کدی که در Nodejs مورد نظرتون هست رو در الکترون مورد استفاده قرار بدین.

پس میتونین به اون مثل یک Nodejs برای Desktop نگاه کنید. الکترون المنت گرافیکی خاصی رو در اختیارتون قرار نمیده و شما میتونین با استفاده از HTML و CSS و Javascript، رابط کاربری نرم‌افزار رو به وجود بیارید.

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

شما میتونین مجموعه‌ای از نرم‌افزارهای ساخته شده با استفاده از الکترون رو در این لینک مشاهده کنید. نرم‌افزارهایی که با استفاده از Electron به وجود اومدن رو میشه به راحتی در App store های Windows و Mac منتشر یا Publish کرد.

مشاهده و تست ویژگی‌های Electron

الکترون یک ابزار بنام electron-api-demos در اختیار کاربران قرار داده تا با قابلیتهای اون آشنا بشید. برای اینکار در ابتدا دستور زیر رو در command line اجرا میکنیم:

با اینکار پروژه مورد نظر clone میشه و در محل مورد نظر قرار میگیره. بعد از پایان با استفاده از cd electron-api-demos وارد دایرکتوری ساخته شده بشید و دستور npm install رو بزنید تا بسته‌های مربوط به اون نصب بشه و در پایان نیز با استفاده از npm start برنامه رو اجرا کنید تا نرم‌افزار باز بشه و بتونین Demo ها رو مشاهده کنید.

ساخت اولین برنامه ساده با Electron

در ابتدا یک دایرکتوری بنام electron-app در Desktop بسازید و وارد اون بشید و در command line دستور yarn init رو اجرا کنید تا package.json برای شما به وجود بیاد. یک ویژگی scripts هم قرار میدیم تا در اون npm script های مورد نظرمون رو قرار بدیم. با استفاده از دستور yarn add --dev electron هم electron رو بصورت dev-dependency اضافه میکنیم.

پس در نهایت کدهای درون فایل package.json بصورت زیر خواهد شد:

حالا میخوایم یک برنامه ساده بسازیم که Hello world رو در یک پنجره به کاربر نمایش بده. برای اینکار در ابتدا یک فایل بنام index.html به وجود میاریم و کدهای زیر رو در اون قرار میدیم:

یک فایل هم بنام main.js به وجود میاریم و کدهای زیر رو درونش قرار میدیم:

همونطور که میبینید یک پنجره با طول و ارتفاع اولیه 800 و 600 پیکسل به وجود آوردم و با استفاده از متد loadURL، محتویات فایل index.html رو در اون رندر کردم. حالا اگر در command line دستور yarn start رو اجرا کنید، برنامه مورد نظر باز میشه و Hello world رو در خروجی خواهید دید:

اگر بخواید از کدهاتون خروجی بگیرید و برای Windows و Linux و Max فایل نصبی ایجاد کنید، میتونین از بسته electron-packager استفاده کنید.

همونطور که میبینید با استفاده از الکترون خیلی راحت میتونین نرم‌افزار مورد نظرتون رو بدون نیاز به یادگیری زبان برنامه نویسی جدید، به وجود بیارید. با استفاده از Electron میتونین خریدهای درون برنامه‌ای، Notification، ویژگی Drag & Drop، مدیریت کلیدهای ترکیبی و ویژگی‌های بسیار زیاد دیگری رو به راحتی پیاده‌سازی کنید.

شما با استفاده از Electron میتونین به‌روز رسانی برنامه‌های خودتون رو نیز مدیریت کنید.

برای مطالعه بیشتر میتونین مستندات Electron رو مطالعه کنید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.