آموزش نصب و ساخت اولین پروژه الکترون How to Install and Set Up Electron on Ubuntu 19.04 (Disco Dingo)

آموزش نصب و ساخت اولین پروژه الکترون     How to Install and Set Up Electron on Ubuntu 19.04 (Disco Dingo)

آموزش نصب و ساخت اولین پروژه الکترون How to Install and Set Up Electron on Ubuntu 19.04 (Disco Dingo)

آموزش نصب فریم ورک الکترون روی اوبونتو و ساخت اولین پروژه - قسمت اول How to Install and Set Up Electron on Ubuntu 19.04 (Disco Dingo)

سه شنبه 6 اسفند 1398
200

آموزش نصب فریم ورک الکترون روی اوبونتو و ساخت اولین پروژه  - قسمت اول

 How to Install and Set Up Electron on Ubuntu 19.04 (Disco Dingo)

STEPS

1. INSTALL NODEJS

پیش نیاز برای نصب الکترون   Nodejs (A JavaScript runtime) است که باید ابتدا نصب شود.

11.13.0 آخرین نسخه فعلی است و می توان آن را با اجرای دستور زیر در ترمینال ما نصب کرد.
 
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

2. UPDATE NPM(OPTIONAL)

Node Package Manager(NPM) (NPM) با نصب nodejs به صورت خودکار نصب می شود. اما اگر ما نیاز به بروزرسانی آن به آخرین نسخه داریم ، از دستور زیر استفاده کنید..

sudo npm install npm@latest -g

3. INSTALL ELECTRON GLOBALLY

اکنون می توانیم با استفاده از NPM ، الکترون را بصورت global   نصب کنیم.

npm i electron -g

4. CREATE AN ELECTRON PROJECT

4.1. INITIALIZE THE PROJECT

 ابتدا یک دایرکتوری پروژه و یک پرونده pack.json را در زیر آن ایجاد کنید.

اکنون مستقیماً به پوشه رفته و یک pack.json را درون آن بسازید.
mkdir AwesomeProject
cd /AwesomeProject
npm init
در صورت تمایل (اختیاری) ، جزئیات پروژه را وارد کنید.

 

4.2. CREATE A VIEW

اکنون هنگام باز کردن برنامه ، پرونده ای را که می خواستیم مشاهده شود ایجاد کنید. الکترون از HTML استفاده می کند تا نمای را ارائه دهد ، بنابراین باید یک فایل index.html ایجاد کنیم.

index.html

  
   Hello World Application
  
  
   

Hello World

  

4.3. CREATE AN INDEX.JS FILE

در pack.json ، برنامه ریزی کردیم که فایل اصلی پروژه ما index.js است. بنابراین باید آن را بسازیم. نکاتی درباره ساختار این پرونده فهرست در زیر آورده شده است.

     مؤلفه های مورد نیاز ما را در پروژه خود وارد کنید
     یک پنجره مرورگر جدید ایجاد کنید.
     نمایی را که می خواهد در بارگیری پنجره نشان دهد (index.html) تعریف کنید.

index.js

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

function newApp() {
  win = new BrowserWindow();
  win.loadURL(
    url.format({
      pathname: "index.html",
      slashes: true
    })
  );
}

app.on("ready", newApp);

5. RUNNING OUR APPLICATION

اکنون می توانیم برنامه Electron خود را با استفاده از دستور زیر اجرا کنیم.
electron .
نظر بدهید