ساخت اولین برنامه با الکترون (Hello World) – آموزش Electron

چهارشنبه ۱۰ بهمن ۱۳۹۷
بازدید ۲,۶۰۳ نفر
سعید سیفی زاده
(15 امتیاز از 3 رای)
Loading...

تصویر electron-first-app_5792 ساخت اولین برنامه با الکترون (Hello World) - آموزش Electron

ساخت اولین برنامه با الکترون (Hello World)

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

یک فایل با نام main.js ایجاد کرده و محتوی زیر را در آن بنویسید:

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path') 
let win 
function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
} 
app.on('ready', createWindow)

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

const url = require('url')

const path = require('path')

let win

function createWindow() {

win = new BrowserWindow({width: 800, height: 600})

win.loadURL(url.format ({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))

}

app.on('ready', createWindow)

یک فایل دیگر با نام index.html ایجاد کرده و محتوای زیر را در آن بنویسید:

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
   </head>
   <body>
      <h1>Hello World!</h1>
      We are using node <script>document.write(process.versions.node)</script>,
      Chrome <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

We are using node <script>document.write(process.versions.node)</script>,

Chrome <script>document.write(process.versions.chrome)</script>,

and Electron <script>document.write(process.versions.electron)</script>.

</body>

</html>

حال با استفاده از دستور زیر برنامه را اجرا کنید:

$ electron ./main.js

1	$ electron ./main.js

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

تصویر electron-first-app_5792_1 ساخت اولین برنامه با الکترون (Hello World) - آموزش Electron

چگونه کار می کند؟

ما دو فایل main.js و index.html را ایجاد کردیم. در فایل main.js از دو ماژول app و BrowserWindow استفاده شده است. ماژول app به منظور کنترل چرخه حیات برنامه استفاده می شود در حالی ماژول BrowserWindow برای ایجاد و مدیریت پنجره های برنامه استفاده می شود.

در فایل main.js ما یک تابع با نام createWindow تعریف کرده ایم که یک شیء از نوع BrowserWindow ایجاد و در متغیر win قرار می دهد. سپس آدرس فایل HTML را برای این پنجره مشخص کرده ایم تا هنگام اجرا شدن برنامه نمایش داده شود.

الکترون - طراحی ظاهر برنامه الکترون - نحوه کار