ایده پردازان جوان

مرجع بروزترین آموزش ها در زمینه مهندسی کامپیوتر

آموزش کار با فریم ورک electronjs

electronjs یک فریم ورک اوپن سورس (Open Source) می باشد که توسط گیت هاب برای ساخت اپلیکیشن های دسکتاب با استفاده از زبان های (html - css - javascript) ارایه شده

اپلیکیشن های ساخته شده با استفاده از فریم ورک الکترون به صورت چند سکویی (Cross Platform) هستن به این معنی که اپلیکیشن ساخته شده در سیستم عامل های ویندوز،لینوکس و مک قابل اجرا خواهد بود

به زبان ساده میتوان گفت که فریم ورک الکترون یک پنجره شامل مرورگر chromium (پایه مرورگر کروم) می باشد که بعد از اجرای کد های داخلی توسط nodejs جهت نمایش خروجی نهایی آن را به مرورگر ارسال می نمایید

فریم ورک الکترون با استفاده از زبان c++ و تولید api های لازم ، برنامه نویس را قادر میسازد که از طریق کد نویسی javascript  امکان دسترسی به تنظیمات سیستم عامل ، ارسال اعلان به کاربر و ... را بتواند انجام دهد

ولی باید توجه داشته باشیم که api های موجود در فریم ورک الکترون محدود بوده و نمیتوان به جرات گفت که مشابه زبان های قدرتمندی مانند سی شارپ ، جاوا و... پاسخ گوی تمام نیاز های ما خواهد بود.

برنامه های بسیار زیادی توسط الکترون ساخته شده که از طریق این لینک میتوانید برنامه های ساخته شده را مشاهده کنید

برخی از برنامه های ساخته شده توسط فریم ورک electron.js

Visual Studio Code

skype

WordPress (نسخه دسکتاپ)

برای شروع کار نیاز به نصب nodejs داریم که میتوانید از طریق سایت nodejs.org نسخه متناسب با سیستم عامل خودتان را دانلود نمایید

بعد از نصب nodejs با اجرای دستور زیر در CMD میتوانیم فریم ورک electron.js را نصب کنیم

npm install electron --save-dev

//for windows

npm install electron -g

با اجرای دستور electron -v میتوانیم ورژن فریم ورک نصب شده را مشاهده کنیم

برای ساخت پروژه جدید به سه فایل package.json که شامل اطلاعات اپلیکیشن هست مانند نام برنامه ، توضیحات و....

فایل index.html (اسم فایل میتواند هر مقداری باشد) که از طریق این فایل میتوانیم ظاهرا اپلیکیشن را طراحی کنیم

فایل index.js پردازنده اصلی فریم ورک با اجرای کد های موجود در این فایل محتوای اپلیکیشن را نمایش میدهد

برای ساخت فایل package.json ابتدا یک پوشه جدید ایجاد میکنم و با ورود به این پوشه از طریق cmd دستور npm init را اجرا میکنیم و اطلاعات اپلیکیشن خودمان را وارد میکنیم (با زدن دکمه Enter میتوانیم مقدار پیش فرض را قبول کنیم)

و در نهایت فایل package.json با محتوای زیر ساخته میشود (می توانیم این فایل را به صورت دستی هم ایجاد کنیم)

{
  "name": "idehpardazanjavan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

در گام بعدی نیاز به فایل index.html داریم که ظاهر برنامه ما را مشخص میکند

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>idehpardazanjavan.com</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>

     <span class="title">ایده پردازان جوان</span>

    </body>
</html>

یک فایل stylesheet نیز به صفحه html خودمان اضافه کردیم که میتوانیم برای استایل دهی محتوای خودمان ازش استفاده کنیم دقیقا مشابه وب

و در نهایت فایل index.js را با کد های زیر ایجاد میکنیم

const electron=require('electron');

function boot()
{
    const win = new electron.BrowserWindow({ width: 600, height: 400 });
    win.loadFile('index.html');
}
electron.app.on('ready',boot);

در ابتدا کتابخانه الکترون را require میکنم و توسط مقدار electron میتوانیم به Object های کتابخانه دسترسی داشته باشیم (app,BrowserWindow)

در تابع boot با نمونه سازی شی BrowserWindow عرض و ارتفاع پنجره اپلیکیشنمان را مشخص کردین (وارد کردن عرض و ارتفاع اختیاری می باشد)

و توسط متد loadFile فایل html که برای نمایش باید ارسال شود را مشخص کردیم

و با فراخوانی رویداد ready تابع boot را برای اجرا معرفی میکنیم

میتوانیم کد های بالا را به شکل زیر هم بازنویسی کنیم

const {app,BrowserWindow}=require('electron');

function boot()
{
    const win = new BrowserWindow({ width: 600, height: 400 });
    win.loadFile('index.html');
}
app.on('ready',boot);

برای مشاهده اپلیکیشن ساخته شده کافی هست از طریق cmd وارد پوشه اپلیکیشن شویم و دستور زیر را اجرا کنیم

electron .

در مقاله های بعدی سایت بیشتر به نحوه کار با فریم ورک electron.js می پردازیم

 

در حال دریافت اطلاعات