-->
Home
app
AppJS

Electron اقوي FrameWork في تصميم برامج سطح المكتب JavaScript

السلام عليكم 
في مقالات سابقة قد نبهنا اننا سوف نقوم بعمل مقدمات وشروحات عن لغة الجافاسكربت وكل ما يتعلق بها فهذه الدروس مفيدة لكل من يحتاج ان يكون Full Stack JavaScript
واليكم الان هذه المقالة المثيرة لمطورين المواقع و كل من يريد ان يقوم بعمل تطبيق علي سطح المكتب بلغة JavaScript 


ما هي Electron :

هي عبارة عن framework مبنية علي لغة node.js والتي مبنية علي لغة JavaScript مفتوحة المصدر مقدمة من المؤسسة المشهورة GitHup تقوم بتوفير البيئة التي تأهلك لعمل برامج لسطح المكتب و ايضا للويب وكل هذا بلغة الجافاسكربت حيث جعلت منها Cross-Platform language وهي ايضا تعتمد بشكل كبير علي التصميم او frame الخاص بنظام تشغيل الجديد الخاص بجوجل وهو ما يسمي Chromium OS ولكن اكثر العمل بها برامج الخاصة بالسيرفرات .

اذا قد تعرفنا علي اليكترون وحان الوقت ان تعرف علي بعض المكونات الاساسية الخاصة بها وكيفية تنصيبها علي الجهاز الشخصي لكي تقوم بالبدأ في العمل عليها.

العمليات الرئيسية :

تبدا العمليات الرئيسية في Electron بملف JSON ويسمي عادتاً package.json  بحيث تقوم عمل ملف main.js ويسمي بالملف الرئيسي داخل ملف الخاص بمشروعك وتقوم من خلاله باظهار الملفات الخاصة بالواجهة الرسومية الخاصة بالمشروع والتي عبارة عن صفحة ويب مكونة من HTML JS CSS ولكن قبل القيام بذلك يجب اولا ان تقوم بتجهيز الملفات الخاصة بك داخل الجهاز اذا لم تكن منصب برنامج atom و مترجم node.js فتفضل بالدخول الي المواقع الخاصة بهم وتحميلهم وتنصيبهم وسوف نقوم بعمل تدوينة نوضح كيف تقوم بتنصيبهم بشكل احترافي ام الان اليك الروابط 

 تحميل Node js : من هنا
تحميل Atom : من هنا

 اذا وبعد التنصيب وانشاء ملف خاص بالمشروع تقوم بفتح CMD او Terminal داخل المشروع وتوم بكتابة هذا الامر.
npm -i electron
وبعد الانتهاء من التنصيب تدخل الي الملف الرئيسي main.js وتضع به هذه الاكواد في اعلي البرنامج 

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 وبعد ذلك تقوم بصنع الدالة التي تقوم بتنفيذ الاكواد في حالة اذا البرنامج انشاء بنجاح .

 
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

وبعدها تقوم بعمل الدوال الخاصة بالشكل frame وهو عبارة object من browser 

let win

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

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

 ثم تقوم بعمل صفحة الويب وهي التي تعتبر في هذا الوقت هي الواجهة الرسومية الخاصة بالبرنامج وليكن اسمها inde.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>

مرحا لقد اتممت البرنامج الان ما عليك فعله هو بناء البرنامج عن طريق هذه الاوامر .

اذا كان البرنامج في نفس المسار تقوم بوضع . eletron 

 ومن ثم تكتب npm start 

 وهنا اذا واجهتك اي مشكلة ادخل علي المرجع الخاص بالمنصة من هنا electron quick guide


Post a Comment