Electron قدرت وب را به برنامه‌های چند پلتفرمی، از جمله برنامه‌هایی که با Angular ایجاد می‌کنید، می‌آورد.
Electron به شما امکان می دهد برنامه های دسکتاپ برای ویندوز، مک و لینوکس بسازید. هنگامی که یک برنامه را با استفاده از Electron می‌سازید، می‌توانید برنامه را از طریق پنجره برنامه دسکتاپ پیش‌نمایش و اجرا کنید.
می‌توانید از Electron برای پیکربندی یک برنامه Angular برای راه‌اندازی در پنجره دسکتاپ، به جای مرورگر وب معمولی استفاده کنید. می توانید این کار را با استفاده از یک فایل جاوا اسکریپت در خود برنامه انجام دهید.
هنگامی که Electron را پیکربندی کردید، می توانید توسعه را همانطور که در یک برنامه معمولی Angular انجام می دهید ادامه دهید. بخش های اصلی برنامه همچنان از همان ساختار استاندارد Angular پیروی می کنند.
چگونه الکترون را به عنوان بخشی از برنامه خود نصب کنید
برای استفاده از Electron، باید node.js را دانلود و نصب کنید و از npm install برای افزودن Electron به برنامه خود استفاده کنید.
- node.js را دانلود و نصب کنید. با بررسی نسخه:node -v Node همچنین شامل npm، مدیر بسته جاوا اسکریپت، می توانید تأیید کنید که آن را به درستی نصب کرده اید. می‌توانید با بررسی نسخه npm:npm -v تأیید کنید که npm نصب شده است
- با استفاده از دستور ng new یک برنامه Angular جدید ایجاد کنید. این یک پوشه ایجاد می کند که حاوی تمام فایل های لازم برای کار کردن یک پروژه Angular است. ng new electron-app
- در پوشه اصلی برنامه خود، از npm برای نصب Electron.npm install –save-dev electron استفاده کنید.
- این یک پوشه جدید برای Electron در پوشه node_modules برنامه ایجاد می کند.
- همچنین می‌توانید Electron را به صورت سراسری بر روی کامپیوتر خود نصب کنید.npm install -g electron
node -v
npm -v
ng new electron-app
npm install --save-dev electron
npm install -g electron
ساختار فایل برنامه Angular Electron
Electron برای ایجاد و مدیریت پنجره دسکتاپ به یک فایل جاوا اسکریپت اصلی نیاز دارد. این پنجره محتویات برنامه شما را در آن نمایش می دهد. فایل جاوا اسکریپت همچنین حاوی رویدادهای دیگری است که ممکن است رخ دهد، مثلاً اگر کاربر پنجره را ببندد.
در زمان اجرا، محتوای نمایش داده شده از فایل index.html می آید. به طور پیش فرض، می توانید فایل index.html را در داخل پوشه src پیدا کنید و در زمان اجرا یک کپی ساخته شده از آن به طور خودکار در پوشه dist ایجاد می شود.
فایل index.html معمولاً به شکل زیر است:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html>
داخل تگ body یک تگ
نحوه استفاده از الکترون برای باز کردن یک برنامه زاویه ای در یک پنجره دسکتاپ
فایل main.js را ایجاد کنید و آن را طوری پیکربندی کنید که محتوای برنامه را در یک پنجره دسکتاپ باز کند.
- یک فایل در ریشه پروژه خود با نام main.js ایجاد کنید. در این فایل، Electron را مقداردهی اولیه کنید تا بتوانید از آن برای ایجاد برنامه کاربردی استفاده کنید window.const { app, BrowserWindow } = require(‘electron’);
- یک پنجره دسکتاپ جدید با عرض و ارتفاع معین ایجاد کنید. فایل فهرست را به عنوان محتوایی برای نمایش در پنجره بارگیری کنید. مطمئن شوید که مسیر فایل فهرست با نام برنامه شما مطابقت دارد. برای مثال، اگر نام برنامه خود را “electron-app” گذاشته باشید، مسیر “dist/electron-app/index.html” خواهد بود.function createWindow() { win = new BrowserWindow({width: 800, height: 800}) ; win.loadFile(‘dist/electron-app/index.html’);}
- وقتی برنامه آماده شد، تابع ()createWindow را فراخوانی کنید. با این کار پنجره برنامه برای app.app.whenReady().then(() => { createWindow()}) شما ایجاد می شود.
- در فایل src/index.html، در تگ پایه، ویژگی href را به “./” تغییر دهید.
- در package.json، یک فیلد اصلی اضافه کنید و فایل main.js را به عنوان مقدار اضافه کنید. این نقطه ورودی برنامه خواهد بود، به طوری که برنامه هنگام راه‌اندازی برنامه، فایل main.js را اجرا می‌کند.{ «name»: «electron-app»، «version»: «0.0.0»، «main» : “main.js”، …}
- در فایل .browserslistrc، فهرست را تغییر دهید تا نسخه‌های 15.2-15.3 سافاری iOS حذف شوند. این از نمایش خطاهای سازگاری در کنسول هنگام کامپایل جلوگیری می کند. آخرین 1 نسخه کروم آخرین نسخه فایرفاکس آخرین نسخه 2 لبه اصلی نسخه آخر 2 نسخه اصلی سافاری نسخه آخر 2 نسخه اصلی iOSFirefox ESRnot ios_saf 15.2-15.3نه safari 15.2-.
- محتوای پیش فرض را در فایل src/app/app.component.html حذف کنید. آن را با محتوای جدید جایگزین کنید.
صفحه اصلی
به برنامه Angular Electron من خوش آمدید!
- در فایل src/app/app.component.css..content { line-height: 2rem; اندازه فونت: 1.2em; حاشیه: 48px 10%; font-family: Arial, sans-serif}.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); عرض: 85%; بالشتک: 16px 48px; حاشیه: 24px 0px; پس زمینه رنگ: whitesmoke; font-family: sans-serif;}
- برای حذف حاشیه‌های پیش‌فرض و paddings، مقداری استایل کلی به فایل src/styles.css اضافه کنید.html { margin: 0; بالشتک: 0;}
const { app, BrowserWindow } = require('electron');
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
}
app.whenReady().then(() => {
createWindow()
})
<base href="./">
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
}
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div>
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
}
html {
margin: 0;
padding: 0;
}
نحوه اجرای یک برنامه الکترونیکی
برای اجرای برنامه خود در یک پنجره، دستوری را در آرایه اسکریپت های package.json پیکربندی کنید. سپس، برنامه خود را با استفاده از دستور موجود در ترمینال اجرا کنید.
- در package.json، داخل آرایه اسکریپت ها، دستوری برای ساخت اپلیکیشن Angular و اجرای Electron اضافه کنید. مطمئن شوید که یک کاما بعد از ورودی قبلی در آرایه Scripts.”scripts” اضافه کرده اید: { … “electron”: “ng build && electron .”},
- برای اجرای برنامه Angular جدید خود در یک پنجره دسکتاپ، موارد زیر را در خط فرمان، در پوشه ریشه پروژه خود اجرا کنید:npm run electron
- منتظر بمانید تا برنامه شما کامپایل شود. پس از تکمیل، به جای باز شدن برنامه Angular در مرورگر وب، یک پنجره دسکتاپ باز می شود. پنجره دسکتاپ محتویات برنامه Angular شما را نشان می دهد.
- اگر می خواهید همچنان برنامه خود را در مرورگر وب مشاهده کنید، همچنان می توانید ng serve command.ng serve را اجرا کنید
- اگر از دستور ng serve استفاده می کنید، محتویات برنامه شما همچنان در یک مرورگر وب در localhost:4200 نمایش داده می شود.
"scripts": {
...
"electron": "ng build && electron ."
},
npm run electron
ng serve
ساخت برنامه های دسکتاپ با الکترون
می توانید از Electron برای ساخت برنامه های دسکتاپ در ویندوز، مک و لینوکس استفاده کنید. به طور پیش فرض، می توانید یک برنامه Angular را با استفاده از یک مرورگر وب از طریق دستور ng serve آزمایش کنید. می توانید برنامه Angular خود را طوری پیکربندی کنید که به جای مرورگر وب در یک پنجره دسکتاپ نیز باز شود.
می توانید این کار را با استفاده از یک فایل جاوا اسکریپت انجام دهید. همچنین باید فایل های index.html و package.json خود را پیکربندی کنید. برنامه کلی همچنان از همان ساختار یک برنامه Angular معمولی پیروی می کند.
اگر می خواهید درباره نحوه ساخت برنامه های دسکتاپ بیشتر بدانید، می توانید برنامه های Windows Forms را نیز بررسی کنید. برنامه‌های Windows Forms به شما این امکان را می‌دهند که عناصر رابط کاربری را روی بوم کلیک کرده و بکشید و در عین حال هرگونه منطق کدنویسی را به فایل‌های C# اضافه کنید.