جستجو برای:
سبد خرید 0
  • صفحه اصلی
  • دوره ها
    • برنامه نویسی وب
      • Asp.net MVC
      • Asp.net Core
      • Asp.net Webform
      • PHP
      • Ruby
      • WCF
    • طراحی سایت
      • جاوا اسکریپت
      • جی کوئری
      • بوت استرپ
      • Angular
      • Nest Js
      • React Js
      • Vue Js
      • TypeScript
      • HTML
    • برنامه نویسی ویندوز
      • سی شارپ
      • Node Js
      • WPF
      • Unity
      • GO
      • C
      • Python
      • Java
      • ++C
    • بانک اطلاعاتی
      • SQLServer
      • SQLite
      • NoSQL
      • ORACLE
      • Redis
      • MySQL
    • برنامه نویسی موبایل
      • ionic
      • Kotlin
      • Xamarin
      • ReactNative
      • NativeScript
      • Android Studio
      • PWA
    • ابزار و توسعه نرم‌افزار
      • مدیریت پروژه
      • سئو و بهینه سازی
      • نمودار های مهندسی UML
      • Docker
      • Jira
    • سیستم مدیریت محتوا
      • وردپرس
      • جوملا
      • پرستا شاپ
      • WHMCS
      • اوپن کارت
    • گرافیک دیزاین
      • آموزش های طراحی
      • طراحی UI/UX
      • طرح های لایه باز
  • نوشته ها
    • اختصاصی اِرونیک
      • پادکست
      • ویدئوها
      • تخفیف ها
    • توسعه وب
      • افزونه ها
      • قالب ها
    • مقالات
      • برنامه نویسی
      • تکنولوژی
      • معرفی ابزار
  • حساب کاربری
  • درخواست دوره
  • تماس با ما
 

ورود

پنج × سه =

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 09117833394
  • info@eronic.ir
perm_identity
سبد خرید 0
  • رهگیری مدرک
  • تماس با ما
  • درباره ما
  • پرداخت
  • بلاگ
0
آکادمی اِرونیک
  • صفحه اصلی
  • دوره ها
    • برنامه نویسی وب
      • Asp.net MVC
      • Asp.net Core
      • Asp.net Webform
      • PHP
      • Ruby
      • WCF
    • طراحی سایت
      • جاوا اسکریپت
      • جی کوئری
      • بوت استرپ
      • Angular
      • Nest Js
      • React Js
      • Vue Js
      • TypeScript
      • HTML
    • برنامه نویسی ویندوز
      • سی شارپ
      • Node Js
      • WPF
      • Unity
      • GO
      • C
      • Python
      • Java
      • ++C
    • بانک اطلاعاتی
      • SQLServer
      • SQLite
      • NoSQL
      • ORACLE
      • Redis
      • MySQL
    • برنامه نویسی موبایل
      • ionic
      • Kotlin
      • Xamarin
      • ReactNative
      • NativeScript
      • Android Studio
      • PWA
    • ابزار و توسعه نرم‌افزار
      • مدیریت پروژه
      • سئو و بهینه سازی
      • نمودار های مهندسی UML
      • Docker
      • Jira
    • سیستم مدیریت محتوا
      • وردپرس
      • جوملا
      • پرستا شاپ
      • WHMCS
      • اوپن کارت
    • گرافیک دیزاین
      • آموزش های طراحی
      • طراحی UI/UX
      • طرح های لایه باز
  • نوشته ها
    • اختصاصی اِرونیک
      • ویدئوها
      • پادکست
    • مقالات
      • تکنولوژی
      • برنامه نویسی
      • معرفی ابزار
    • توسعه وب
      • افزونه ها
      • قالب ها
  • درخواست دوره
  • همکاری با اِرونیک
ورود و ثبت نام

وبلاگ

آکادمی اِرونیک بلاگ مقالات برنامه نویسی فریم ورک Electron JS چیست؟و چه کاربردی دارد؟

فریم ورک Electron JS چیست؟و چه کاربردی دارد؟

access_time2019/10/23
perm_identity ارسال شده توسط Armin Saket
folder_open برنامه نویسی ، مقالات
visibility 352 بازدید

این روز ها بازار فریم ورک های جاوا اسکریپتی به شدت داغ است و فریم ورک هایی مثل انگولار , ری اکت و یا حتی ویو جی اس به شدت در میان کاربران محبوب شده اند.

اما در این میان رقبای جدیدی هستند که با تغیرات مثبتی که داشتند باعث جذب برنامه نویسان و طراحان وب شده اند.

الکترون جی اس یا به انگلیسی Electron JS یک فریم‌ورک زمان اجرا است که به کاربر اجازه می‌دهد برنامه‌های desktop-suite را با HTML5، CSS و JavaScript ایجاد کند.

الکترون یک پروژه منبع باز (open source) است که توسط Cheng Zhao، مهندسی در گیت‌هاب، دایر شده است.

بنابراین هر برنامه وبی که می‌نویسید می‌تواند بر روی Electron JS نیز اجرا شود. به طور مشابه، هر برنامه Node.jsای که می‌نویسید می‌تواند از این تکنولوژی استفاده کند.

کی و چگونه Electron JS ایجاد شد؟

سفر Electron JS در ژانویه 2013 با جستجوی ابزاری برای ساخت ویرایشگر متنی cross-platform که کاربر بتواند با تکنولوژی‌هایی مثل JavaScript، HTML و CSS کار کند، آغاز شد.

Electron JS در 15 جولای 2013، جهت ساخت توسعه cross-platform آسان‌تر برای ایجاد ” Atom” تاسیس شد. در ابتدا به عنوان Atom Shell شناخته شد. نگاهی به تصویر زیر بیندازید تا ایده دقیق‌تری در مورد سفر Electron JS به دست آورید.

ویژگی‌های کلیدی Electron JS چیست؟

با فرض تعریف فوق، پرسش شما در مورد اینکه Electron JS چیست حل می‌شود، حالا بیایید به سراغ ویژگی‌های آن برویم.

Electron JS از تکنولوژی‌های وب مثل HTML، CSS و JavaScript ساده استفاده می‌کند. این کار به مهارت‌های بومی (native) نیازی ندارد مگر اینکه بخواهید کارهای پیشرفته‌ای را انجام دهید. می‌تواند برای یک مرورگر واحد طراحی شود. فایل سیستم‌ آن به APIهای Node.js تعلق دارد و بر روی لینوکس، ویندوز، Mac OS X کار می‌کند.

از ماژول npm استفاده می‌کند که به طور گسترده برای جاوا اسکریپت استفاه می‌شود. شامل یک منوی native برای دیالوگ‌ها و اعلان‌هاست. نصب‌کنندگان ویندوز نیازی به هیچ تنظیماتی ندارند.

همچنین امکان به‌روزرسانی خودکار و گزارش crash (از کار افتادن) در ویندوز و Mac را با Squirrel دارد. گزارشات crash برای تحلیل بیشتر به سرور راه دور ارسال می‌شود. فعالیت‌های ردیابی محتوا مثل اشکال‌زدایی توسط Chromium دنبال می‌شوند.

چرا باید به Electron توجه کنیم؟

بخش‌های سخت و خسته‌کننده ساخت برنامه‌های دسکتاپ ساده‌سازی بسته‌بندی، نصب، به‌روزرسانی، ارائه پشتیبانی از منوهای بومی، اعلان‌ها، دیالوگ‌ها و درنهایت بهینه‌سازی گزارش‌های crash برنامه است. Electron JS تا حد زیادی همه این مراحل ضروری را پشت سر می‌گذارد تا کاربر بتواند بر روی هسته برنامه خود تمرکز کند.

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

بیشتر بخوانید:  Node Js چیست و چه مزایایی دارد؟

به این ترتیب ما از انتخاب‌های زیادی برخوردار نیستیم اما در تکنولوژی‌هایی که برای پیاده‌سازی و نوع کدهایی که باید پیش‌نویس کنیم محافظه‌کار می‌شویم. هنگامی که شما برنامه‌ خود را با Electron می‌سازید، نسخه خاصی از Chromium و Node.js را بسته‌بندی می‌کنید، بنابراین می‌توانید به تمام ویژگی‌های موجود در این نسخه‌ها تکیه کنید.

نگاهی سریع به معماری

حالا اجازه دهید نگاهی به معماری Electron JS بیندازیم. اگر شما می‌گویید Electron JS پیتزا و Node JS خمیر آن است، پس Chrome پنیر است و V8 JavaScript Engine چاشنی روی آن می‌باشد.

Libchromiumcontent

Chrome یک مرورگر وب open-source است که توسط گوگل ساخته شده است، که یک window manager یا shell برای وب را ارائه می‌دهد. یک رابط کاربری مینیمالیست دارد و از V8 به عنوان موتور جاوااسکریپت استفاده می‌کند. Libchromiumcontent کتابخانه رندرینگ Chromium است که پایه‌ای منبع باز برای مرورگر کروم گوگل است.

Node JS

Node JS پلت‌فرم منبع بازی است که از موتور V8 JavaScript استفاده می‌کند و شما را قادر به اجرای جاوااسکریپت خارج از مرورگر می‌سازد و یک shell تعاملی فراهم می‌کند که می‌تواند کد جاوااسکریپت را اجرا کند.

پروژه Node.js در سال 2009 به عنوان یک زمان اجرای cross-platform و منبع باز برای توسعه برنامه‌های سمت سرور با استفاده از جاوااسکریپت منتشر شد. Node.js با package managerای به نام npm همراه است، که بزرگ‌ترین کتابخانه اکوسیستم منبع باز است.

موتور جاوااسکریپت V8

موتور جاوااسکریپت V8 یک موتور جاوااسکریپت منبع باز است که توسط گوگل ساخته شده و با C++ و جاوااسکریپت نوشته شده است.

فرآیند کاری Electron JS چگونه است؟

پس از آنکه متوجه شدید که Electron JS چیست و معماری آن را تحلیل کردید، بیایید ببینیم که چطور کار می‌کند. برنامه‌های Electron دو فرآیند اجباری دارد، فرآیند اصلی و فرآیند رندر کردن.

هر فرآیند نقش خاصی را ایفا می‌کند. Bootstrapping برنامه توسط فرآیند اصلی انجام می‌شود. از سوی دیگر فرآیند رندرینگ توسط فرآیند اصلی ایجاد می‌شود. فرآیند رندر UI برنامه را نشان می‌دهد. هر فرآیند از معماری چندپردازنده Chromium بهره می‌برد و بر روی thread خود اجرا می‌شود.

 

اجرای اولین برنامه Electron JS، نصب ” Hello World”

1-یک فولدر جدید در فایل سیستم خود ایجاد کنید.

برای ایجاد یک برنامه پایه نیاز به سه نوع فایل دارید: package.json، main.js و index.html

2-ایجاد فایل package.json با دستور ” yarn init”:

{
            "name": "electron",
            "version": "2.0.0",
            "main": "index.js",
            "license": "MIT"
}

این فایل JSON به فایل اصلی برنامه اشاره می‌کند و جزئیات و وابستگی‌های آن را لیست می‌کند.

در فایل package.json، فایل main را به main.js تغییر داده و اسکریپت زیر را اضافه کنید:

"scripts": {
          "start": "electron ."
}

الکترون را نصب کنید:

yarn add --dev electron

حالا می‌تواند اجرا شود:

yarn start

از آنجایی که هنوز کد دیگری را اضافه نکرده‌اید، باید این را دریافت کنید:

بیشتر بخوانید:  بهترین نرم افزار های مدیریت پروژه آنلاین

حالا وقت آن است که کد را در فایل‌ها اضافه کنید و یک برنامه Hello World ایجاد کنید.

اسکریپت زیر را به فایل main.js اضافه کنید:

'use strict'
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
app.on('ready', () => {
                    // Create the browser window.
                    const win = new BrowserWindow({ width: 1000, height: 800 })

                    // and load the index.html of the app.
                    win.loadURL(
                                        url.format({
                                                  pathname: path.join(__dirname, 'index.html'),
                                                  protocol: 'file:',
                                                  slashes: true
                                                  })
                                        )
                    })

این فایل برنامه را اجرا کرده و یک پنجره مرورگر برای رندر HTML و همچنین فرآیند اصلی برنامه ایجاد می‌کند. همچنین مسئول ادغام و تعامل با GUI سیستم عامل است.

شما می‌توانید از هر کتابخانه جاوااسکریپتی مثل Angular، React، JQuery و غیره برای فرآیند رندر استفاده کنید.

 

فایل 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>

Index.html یک صفحه وب برای رندر است. این فرآیند رندر برنامه است. بعد از اینکه فایل‌های ابتدایی main.js، index.html، و package.json را ایجاد کردید، می‌توانید برنامه خود را با اجرای ” yarn start” از دایرکتوری برنامه‌یتان تست کنید.

وقتی فایل‌های برنامه را اجرا می‌کنید، پنجره باز شده و Hello World نشان داده می‌شود.

این یک برنامه ساده است، و وقتی close پنجره را بزنید از برنامه خارج می‌شوید. ایجاد این برنامه به شما یک ایده کاربردی‌تر از آنچه که Electron JS است می‌دهد.

ابزارهایی برای توسعه‌دهندگان Electron JS

ابزارهایی برای Electron JS وجود دارد که نیاز به ساخت برنامه دارند. مهم‌ترین این ابزارها عبارتند از:

Electron-prebuilt، Electron-compile، Electron-packager، Devtron، Spectron.

نتیجه‌گیری

امیدواریم به شما کمک کرده باشیم تا درک کنید Electron JS چیست و با ویژگی‌ها، پیاده‌سازی و ابزارهای اصلی آن آشنا شده باشید.

به طور کلی، Electron JS با اکثر برنامه‌های داینامیک همراه است که از مرورگر ما به عنوان پلت‌فرمی برای ارائه ویژگی‌های تعبیه شده آن استفاده می‌کند و به ما در ارتباط با مخاطبان گسترده‌تر کمک می‌کند. پس از همه این موارد، ایجاد و ارائه برنامه‌های مناسب که می‌توانند به کاربران کمک کنند کار خود را انجام دهند، هدف اصلی هر فریم‌ورک منبع بازی است.

برچسب ها: electron jsElectron JS CourseElectron js githubElectron JS چیست؟eronic.irLearn Electron JSآموزش الکترونآموزش الکترون جی اسآموزش تخصصی Electron JSاِرونیکالکترونالکترون جی اسالکترون جی اس چیست؟پروژه تستی Electron JSمزایای Electron JSمقایسه Electron JS
اشتراک گذاری:

مطالب زیر را حتما بخوانید
  • نکاتی کلیدی جهت بهبود سئوی وب سایت در سال 2019

    280 بازدید

  • بهترین و محبوب ترین پایگاه های داده در سال 2019 کدامند؟

    408 بازدید

  • 10 زبان برنامه نویسی برتر سال 2019

    332 بازدید

  • ReactJS یا Angular؟کدام یک بهتر است؟

    483 بازدید

  • انگولار چیست؟چه مزایا و ویژگی هایی دارد؟

    552 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
  • محبوب
  • جدید
محصولات
  • آموزش صفر تا صد ری اکت جی اس + پکیج ورود به بازار کار + پروژه عملی 1,200,000 تومان 598,000 تومان
  • دوره آموزشی صفر تا صد وردپرس + 3 پروژه عملی
    نمره 5.00 از 5
    250,000 تومان 200,000 تومان
تبلیغات
درباره اِرونیک

اِرونیک آکادمی آنلاین برنامه نویسی تشکیل شده از با تجربه ترین برنامه نویسان ایران است.ما در اینجا سعی میکنیم جدیدترین تکنولوژی های روز دنیا را با شما به اشتراک بگذاریم

  • location_on
    مازندران , ساری
  • phone_android
    09117833394
  • email
    info@eronic.ir
دسترسی سریع
  • صفحه اصلی
  • بلاگ
  • دوره ها
  • حساب کاربری
  • سبد خرید
  • پرداخت
  • کیف پول من
  • تماس با ما

logo-samandehi

تمامی حقوق برای آکادمی آنلاین اِرونیک محفوظ می باشد.
keyboard_arrow_up