چگونه از electron برای ایجاد یک برنامه استفاده کنیم
اتفاقات زیادی تو زندگی میوفته که باعث میشه آدم تصمیماتش رو تغییر بده، این پست و کلا پست جدید تو بلاگ قرار نبود تا تموم شدن برنامهای که میخوام بسازم نوشته بشه، پیش خودم تصمیم گرفته بودم که پست جدید رو بعد از تموم شدن darling
مینویسم. (دارلینگ اسم برنامهای هست که قصد دارم بعنوان واسط کاربری مدیریتی برای hexo
بنویسم و در حال حاضر فقط بخشهاییش رو پیاده سازی کردم و نیازمند بسی تغییره)
البته موضوع پست چندان بیربط به این برنامه نیست و اینکه این پست رو هم دارم با نسخه خیلی اولیه darling
مینویسم که فعلا نقشnotepad
رو داره :) توی این پست قراره نحوه راه اندازی الکترون و اجرای یک کد خیلی کوچک توی اون رو با هم ببینیم.
بدون هیچ حرف دیگهای بریم سراغ کارامون
ایجاد پروژه جدید با nodejs
برای اینکه یک پروژه جدید با nodejs
بسازیم، ترمینال خودتون رو باز کنید و دستور زیر رو وارد کنید. با اجرای این فرمان از شما چند تا سوال میپرسه که اسم پروژه هست و ورژن چنده و لایسنس چی هست که پاسخ اینها رو شما بهتر از من میدونیم. (من هنوز علاقهمندم یک مرجع خوب برای توضیح فارسی لایسنسها پیدا کنم)
تنها سوالی که اهمیت بالایی داره entry point
هست، که مشخص میکنه کدوم فایل شما حاوی کدهای اجاری برنامه است. که مقدار پیش فرض آن index.js
است. اینجا فرض ما هم همین مقدار پیشفرض خواهد بود.
بعد از اتمام کار فرمام درون دایرکتوری فعلا یک فایل package.json
میبینید که اگه بازش کنید پاسخهای خودتون رو در اون میبینید.
راهاندازی electron
الکترون برنامهای هست که امکان ایجاد window
توی سیستمعامل و مدیریت و اونهارو به ما میده، و با استفاده از موتور وب chromium
امکان رندر کردن HTML
, CSS
و اجرای JS
رو توی اون پنجره فراهم میکنه. اگه بخواین خودتون سورت الکترون رو دانلود وbuild
کنید، به سه چهار گیگ فضا و مقدار زیادی وقت احتیاج دارید تا دست آخر بتونید فایل اجرایی برای سیستم عامل خودتون بسازید، برای اینکه ما نه اینقدر فضا رو هاردمون داریم و نه حوصله و وقت build
کردن هنگام گشترس برنامه خودمون میتونیم از بیلدهای آماده ای که وجود داره استفاده کنیم، پکیج electron-prebuild
دقیقا چیزی هست که میخوایم. این پکیج بیلدهای آماده برای سیستمعاملهای مختلف رو داره و تنها کافیه این رو نصب کنیم تا فایل اجرایی الکترون رو برای ما دانلود کنه.
خب بعد از نصب این پکیج برای استفاده از اون و ایجاد یک پنجره جدید لازمه بریم سراغ entry point
خودمون یعنی همون فایل index.js
و چند کلامی باهاش اختلات کنیم. کد زیر محتویات فایل index.js
رو نشون میده.
|
|
مهمترین بخش در این کد تابع createWindow
هست که وظیفه خطیر ایجاد پنجره جدید رو بر عهده داره. این تابع وقتی فراخوانی میشه که الکترون به وضعیت آماده رسیده باشه (سطر ۳۳).
در تابع createWindow
در سطر۱۳ یک پنجره جدید ساخته شده و اندازه اون مشخص میشه، سپس در سطر ۱۶ مسیر فایل html
که قراره درون این پنجره لود بشه تعیین میشه. پس با توجه به کد زیر ما باید فایل index.html
درون دایرکتوری renderer
رو ایجاد کنیم.
|
|
خب کار با الکترون تمومه و میتونیم برای اجرای برنامه دستور زیر رو اجرا کنیم.
برای سهولت توی اجرا درون فایل package.json
در بخش scripts
میتونیم یا میانبر برای این دستور ایجاد کنید. چیزی مشابه زیر
بعد از همه این تنظیمات محتویات package.json
چیزی شبیه زیر هست
کار همینجا تمام است و شما میتوانید به راحتی اسکریپتهای لازم برای برنامه خود را درون renderer/index.html
فراخوانی و اجرا کنید. همچنین میتوانید درون پنجره از قدرت nodejs
نیز بهره ببرید برای مثال در اگر کدهای زیر را به فایل renderer/index.html
خود اضافه کنید میتوانید لیست فایلها وفولدرهای دسکتاپ خود را ببینید.
بعد از تغییر فایل روی پنجره برنامه خود کلیک کنید و دکمه ctrl+R
(cmd+R
) را فشار دهید تا صفحه ریولد شود.
- قبل از نوشتن این مطلب قرار بود نحوه استفاده
React
وWebpack
رو هم توی این مطلب توضیح بدم، ولی بعد از نوشتن بخش الکترون منصرف شدم، اگه عمری باقی بود در آینده اون رو هم در مطلبی مینویسم - کدهای این مطلب رو میتونید توی این ریپوی گیتهاب پیدا کنید.