آموزش ایجاد اپلیکیشن دسکتاپ با Angular 8 و Electron همراه با خروجی Exe

به نام خدا. در این آموزش قصد دارم نحوه ی ایجاد یک اپلیکیشن دسکتاپ (PC) را با Angular 8 و Electron خدمتتان آموزش دهم، در انتها نیز از برنامه ی ایجاد شده خروجی قابل اجرا در ویندوز (exe.) خواهیم گرفت.

Electron یک فریمورک چندسکویی برای توسعه ی برنامه های دسکتاپ با استفاده از تکنولوژی های وب است. خروجی برنامه های ایجاد شده توسط Electron قابل استفاده روی سیستم عامل های مختلف ویندوزی، لینوکس و مکینتاش می باشد. از معروف ترین برنامه هایی که با Electron و با استفاده از تکنولوژی های وب ایجاد شده می توان به Visual Studio Code اشاره کرد.

در این آموزش ما به توسعه یک برنامه ی دسکتاپ با کمک Angular 8 و Electron از ابتدا خواهیم پرداخت. کدهای این آموزش در لینک زیر قابل دانلود و استفاده است:

کدهای این آموزش در آدرس زیر قابل مشاهده و دانلود است
https://github.com/MohammadMoeinFazeli/Angular8-ElectronDesktopApp

نصب و راه اندازی Angular

برای ایجاد یک برنامه Angular 8 نیاز به نصب nodeJs از آدرس https://nodejs.org دارید. پس از نصب node js مدیریت کننده بسته های آن یعنی npm نیز روی سیستم شما نصب می شود.

اکنون برای نصب Angular CLI که ابزاری تحت خط فرمان برای ایجاد پروژه های انگولار است، دستور زیر را در ترمینال اجرا کنید:

npm install -g @angular/cli

سپس با اجرای دستور زیر در خط فرمان یک پروژه Angular جدید ایجاد کنید:

ng new angular-electron

بسیار عالی. برای تست و اجرا پروژه ی خود می توانید با دستورات زیر وارد پوشه ی پروژه شده و آن را اجرا کنید:

cd angular-electron
ng serve

اکنون با مراجعه به آدرس http://localhost:4200 در مرورگر می توانید خروجی پروژه انگولاری خود را ببینید.

تنظیم و نصب Electron

قبل از نصب و راه اندازی Electron، ابتدا فایل src/index.html را باز کرده و مقدار تگ base را به صورت زیر ویرایش کنید (یعنی علامت نقطه را کنار / قرار دهید):

<base href="./">

حال با اجرای دستور زیر در خط فرمان، Electron را به پروژه خود اضافه کنید:

npm install --save-dev electron

برای نوشتن تنظیمات Electron یک فایل js با عنوان دلخواه مثلا desktop-app.js را به پوشه ی اصلی پروژه انگولار خود اضافه کنید و محتویات زیر را درون آن قرار دهید:

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

let win;

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600
  });

  // Load the angular app.
  win.loadFile('./dist/angular-electron/index.html');

  // Emitted when the window is closed.
  win.on('closed', () => {
    win = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

در این فایل ابتدا بسته ی electron را اضافه کردیم و پس از اجرای برنامه و رویداد ready تابع createWindow را اجرا می کنیم. این تابع وظیفه ایجاد یک صفحه ویندوزی و بارگذاری فایل های build شده ی پروژه ی Angular در آن را برعهده دارد. دستور win.loadFile(‘./dist/angular-electron/index.html’); فایل build شده پروژه انگولار 8 ما را توسط Electron روی پنجره ی اصلی برنامه بارگذاری می کند.

تنظیم و اجرای برنامه ی دسکتاپ

برای اجرای برنامه ی دسکتاپ باید یکسری تغییرات در فایل package.json پروژه انگولار خود ایجاد کنید. بدین منظور فایل package.json را باز کرده و بخش های مشخص شده را به آن اضافه کنید:

{
  "name": "angular-electron",
  "version": "0.0.0",
  "productName": "Angular Electron",
  "main": "desktop-app",
  "scripts": {
....
....

همچنین فرمان زیر را به بخش scripts در فایل package.json اضافه کنید

“electron”: “ng build && electron .”

اکنون اگر از Angular 8 استفاده می کنید باید یک تغییر کوچک در فایل tsconfig.json بدهید (در نسخه های قبلی این تغییر نیاز نیست) و مقدار فیلد target را از es2015 به es5 تغییر دهید:

"target": "es5"

بسیار عالی. اکنون با اجرای دستور زیر در خط فرمان که ابتدا پروژه ی انگولار را build می کند، می توانید خروجی پروژه ی Electron خود را ببینید:

npm run electron

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

گرفتن خروجی ویندوزی از پروژه با فرمت exe.

اکنون می توانید از پروژه ی خود خروجی exe برای اجرا به صورت کاملا مستقل روی ویندوز تهیه کنید. بدین منظور باید ابتدا با اجرای دستور زیر در خط فرمان، بسته ی electron-packager را به صورت سراسری نصب کنید:

npm install electron-packager -g

با استفاده از بسته ی electron-packager می توان خروجی های مختلفی از پروژه های Electron تهیه کرد: خروجی برای سیستم عامل windows، Linux و حتی mac. همچنین برای سیستم عامل ها با معماری 64 بیتی (x64) و یا 32 بیتی (x86) نیز می توان خروجی مناسب را تولید کرد.

ما در این آموزش قصد داریم خروجی قابل اجرای روی ویندوز 64 بیتی را با استفاده از این بسته ایجاد کنیم. بدین منظور دستور زیر را در خط فرمان و درحالی که در پوشه ی مربوط به پروژه ی انگولاری خود هستید اجرا کنید:

electron-packager . angular-electron --platform=win32 --arch=x64

ایجاد خروجی توسط electron-packager کمی طول می کشد و پس از اتمام فرآیند یک پوشه با عنوان angular-electron-win32-x64 در کنار سایر پوشه های پروژه شما ایجاد می شود که درون آن angular-electron.exe قرار دارد.

اکنون شما می توانید با دوبار کلیک کردن روی این فایل، از برنامه ویندوزی که با Angular و به کمک Electron ایجاد کردید لذت ببرید…

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

موفق باشید. التماس دعا