لقد قمنا ببعض التغييرات هنا !

اسمح لنا أن نعرفك على موقع نقرة بحلته الجديدة ! اختر القسم من القائمة لنوضح لك ما الذي حدث !

تنمية المحتوى العربي

الآن , أصبح تركيزنا الأكبر في نقرة على صناعة المحتوى وتعميمه , نعمل بشكل يومي لتوفير مقالات ذات جودة عالية من مصادر موثوقة لتحسين واقع الانترنت العربي, نحن في مهمة - كما الجميع - لتنمية التواجد العربي على الانترنت

لماذا ؟

قمنا ببحث بسيط , و وجدنا نتائج مخيفة ! يتحدث اللغة العربية ما يقارب 310 مليون شخص في حين أن المحتوى العربي لا يزيد عن 0.7% من محتوى الانترنت العام , و نصف هذا المحتوى محتوى غير هادف و أدنى من الجودة الحقيقية للمجتمع العربي , لذا كان لابد لأحدنا أن يتقدم في مسيرة لتحسين واقع الانترنت العربي .

خدمة سؤال و جواب

ملتزمون بدعمنا لجميع خدماتنا السابقة , لا تزال خدمة سؤال و جواب فعالة كما كانت من قبل , الفرق الوحيد هو انتقالها الى رابط فرعي على الموقع

لا تزال هذه الخدمة محل اهتمامنا كما هي محل اهتمام الكثير من مستخدمي الموقع , يمكنكم زيارة موقع خدمة سؤال و جواب من هنا , كل شيئ سيعمل كما كان في الماضي

qa.naqrah.net

ماذا عن حسابي ؟

كل شيئ تماماً كما تركته ! لا يوجد أي تغييرات في حسابات المستخدمين نهائياً

يمكنك تسجيل الدخول , تسجيل الخروج , تعديل بيانات الحساب , الاشتراك بالقائمة البريدية تماماً كما كنت تفعل سابقاً

حسابك الشخصي

تحديث السياسات

في حال كنت غائباً عن موقع نقرة لفترة طويلة , فنأمل منك اعطائنا بضع دقائق من وقتك لمراجعة سياسة الخصوصية و شروط الاستخدام للتأكد من أي تحديثات قد لم تقرأها قبلاً

سياسة الخصوصية و شروط الاستخدام

الخطوات التالية

الآن , بعد أن تعرفت على التحديثات الحاصلة في الموقع , سننتقل للخطوة التالية

نستطيع توفير مقالات مخصصة لك و تتمحور حول اهتماماتك , نحتاج منك أن تعرفنا باهتماماتك! سنفعل ذلك في الصفحة التالية ...

اختيار الاهتمامات
  • تنمية المحتوى العربي
  • خدمة سؤال و جواب
  • ماذا عن حسابي ؟
  • تحديث السياسات
  • الخطوة التالية

انشاء برامج سطح المكتب بلغات برمجة الويب , تعرف على Electron js

انشاء برامج سطح المكتب بلغات برمجة الويب , تعرف على Electron js

من المحتمل أنك وجدت هذا المقال عند بحثك عن اجابة لسؤال : كيف يمكنني انشاء برامج سطح المكتب باستخدام تقنيات الويب ؟ او ما هو Electron js ؟

نعدك ألا يخيب ظنك , ستجد في هذا المقال دليل كامل للمبتدئين لفهم ماهية اطار عمل Electron js والتعرف على أسهل طريقة والأكثر جودة لانشاء برامج سطح المكتب باستخدام تقنيات الويب .

Electron js هو اطار عمل للغة جافاسكرييبت , قام بانشائه مبرمج سابق في جيت هاب ونشره كمشروع مفتوح المصدر يهدف أساساً الى انشاء برامج سطح المكتب باستخدام لغات الويب الأشهر وهي (HTML , CSS , Javascript) , هذه كمجرد اجابة قصيرة عن سؤالك , سندخل الآن في التفاصيل العميقة , لنبدأ الرحلة.

ما هو Electron js ؟

Eelctron js هو اطار عمل , ليس بمكتبة او اضافة بل اطار عمل متكامل , مفتوح المصدر قام ببنائه تشينغ شاو , وهو مهندس برمجيات في شركة Github الأمريكية المالكة لموقع Github.

باعتباره مشروع مفتوح المصدر , فلا يوجد حد للتوقعات والتطوير الممكن , ولنضع الأمر ببساطة يقوم Electron js بدمج محرك Chromium مع تقنية NodsJs لاتاحة الامكانية لعرض البرنامج الخاص بك على سطح المكتب كبرنامج عادي , لكنه في الواقع وخلف الكواليس يعمل تماماً كما يعمل أي موقع ويب , ومهمة Electron js هنا هي اعطائك الصلاحيات للوصول الى موارد الجهاز المادية (المعالج , الذاكرة العشوائية , مكبرات الصوت , الشاشة .. الخ) وكذلك الوصول الى موارد نظام التشغيل نفسه كي تستطيع ارسال اشعارات على سبيل المثال او رفع الصوت او كتمه مثلاً , كل ذلك أصبح ممكناً الآن بعد التعاون الوثيق بين التقنيات السابقة , يعرف هذا النوع من البرامج باسم : التطبيقات الهجينة.

مقال مرتبط : التطبيقات الأصلية Native و التطبيقات الهجينة Hybrid , أيهما أفضل ؟

و أود توضيح نقطة مهمة هنا , البرنامج الذي نقوم بانشائه عبر Electron هو فعلياً موقع , يتم عرضه في Web View (وهنا يأتي دور Chromium) ويقوم برنامجك بالتواصل مع موارد الجهاز و موارد النظام عبر Nodejs و Electron , اذا نحن فعلياً نقوم بانشاء موقع ونضعه في متصفح مخفي ضمن نظام التشغيل , سيبدو المنتج النهائي كبرنامج وسيعمل تماماً كبرنامج عادي , لكن من المهم توضيح نقطة أننا لا نقوم ببناء برنامج فعلي , بل موقع موضوع ضمن اطار خفي يعرض على شكل برنامج بشكل سحري.

رابط اطار العمل الرسمي : https://electronjs.org/

اما رابط المشروع على جيتهاب: https://github.com/electron

مقالة مرتبطة : ما هو Github ؟ دليل المبتدئين لاستخدام موقع Github

Electron js يساعدك على انشاء برامج كمبيوتر تعمل مع كل أنظمة التشغيل

بالعودة للنقطة السابقة نجد ان برنامجنا هو موقع في حقيقة الأمر , و بطبيعة الأحوال يمكنك تصفح موقع من أي جهاز كان ويندوز , ماك أو لينكس ولن يكون هناك فروقات كبيرة , بنفس المبدأ نجد طريقة عمل Electron js , لذلك البرنامج الذي سنقوم بانشائه سيعمل بشكل سليم بنسبة تتجاوز ال 90% على جميع أنظمة التشغيل , أما ال 10% الباقية فنتركها للاختلافات في الأنظمة كاختلاف نظام الاشعارات أو الملفات او الأذونات مثلاً , وكلها يمكن حلها بتغييرات بسيطة في الكود.

كيف بدأت رحلة Electron js ؟

سنستعرض خلفية تاريخية سريعة عن الاطار , بدأ العمل على اطار Electron js في عام 2013 , عندما أرادت شركة جيت هاب انشاء محرر أكواد خاص بها يعمل على جميع المنصات , ظهرت فكرة Electron js في ذلك الوقت وتم بدء العمل بتاريخ 15 / 7 / 2013 على انشاء أول نسخة , وكان الهدف هو انشاء محرر أكواد جيت هاب المعروف باسم Atom , لذلك يعتبر Atom أول برنامج تم انشائه باستخدام Electron js.

في عام 2014 تحول Electron js الى مشروع مفتوح المصدر وتم نشره على جيتهاب ليبدأ العمل الجماعي على تطويره , في شهر 4 من عام 2015 تم اطلاق الاسم Electron عليه حيث كان يعرف ب Atom Shell قبل ذلك , وأخيراً في عام 2016 تم الاطلاق الرسمي للنسخة 1.0 من اطار العمل , الصورة التالية تختصر رحلة Electron منذ ظهور الفكرة حتى أول اطلاق رسمي:

ما هي أهم ميزات Electron js ؟

اعتقد أن الأقسام السابقة أجابت عن سؤال ما هو Electron js وأيضاً سؤال كيف يمكنني انشاء برامج سطح المكتب باستخدام تقنيات الويب. سننتقل الآن للنقطة التالية , سنتحدث في هذا القسم عن أهم ميزات اطار عمل Electron js.

انشاء برامج سطح مكتب متعددة المنصات باستخدام كود واحد

انشاء برامج سطح المكتب باستخدام تقنيات الويب

تقارير الأعطال Crash Report

قوائم أساسية Native Menus

ليس هناك حاجة لاستخدام لغات اساسية ك C# , C+++ , Java أو غيرها

امكانية التواصل بين برنا مج وبين سيرفر تابع لك لتوفير خدمات مرتبطة بالانترنت (تنضيب اضافات , رفع ملفات ... الخ)

يعتمد Electron على npm لادارة الحزم و التحديثات الخاصة به

امكانية اضافة خاصة التحديث التلقائي الى برنامجك

يمكنني الاكمال الى الأبد , فالمميزات لا تنتهي حقيقة , يمكنك Electron من انشاء تطبيقات ببساطة آلة حاسبة وحتى تطبيقات أكبر كمحررات الأكواد وصولاً الى تطبيقات ضخمة كشبكة تواصل و رسائل وغيرها مثل Discord مثلاً .

لم علي تعلم Electron js أصلاً ؟

لتوفير الحلول ببساطة , انشاء تطبيق مبني على اللغات الاساسية صعب للغاية في بعض النقاط منها تقارير الأعطال او القوائم الداخلية ومشاكلها الكثيرة , أضف الى ذلك أنك قد تحتاج كود مخصص لكل نظام تشغيل , يوفر Electron js حل لكل هذه المشاكل , ويترك لك مهمة التركيز على جوهر البرنامج بدلاً من اضاعة الوقت بحل مشاكل جانبية , و أيضاً تخيل ما يمكنك انجازه ان استطعت استخدام HTML , CSS لتصميم واجهة التطبيق , بغض النظر عن الامكانيات , سهولة هاتين اللغتين كافية لاقناعك بالتوجه الى تعلم Electron js .

نظرة عامة على معمارية Electron js

لنلقي بعض الضوء الآن على معمارية البيانات في اطار عمل Electron js , لو افترضنا أن Electron هو عبارة عن شريحة بيتزا :) , فتعتبر Nodejs هي العجين الموجود في قاعدة البيتزا , ومحرك Chromium هو الجبن , أما محرك او مفسر جافاسكريبت (Javascript Engine) هو باقي المواد في البيتزا , سنبدأ الآن بشرحهم واحداً تلو الآخر.

LibChromiumContent

متصفح جوجل كروم هو مشروع مفتوح المصدر بواسطة شركة جوجل , يوفر ميزة تعدد الصفحات (التابات المتعددة لفتح أكثر من موقع في نفس الوقت) , مكون من واجهة مستخدم بسيطة ومضمن فيه محرك / مفسر جافاسكريبت , اما LibChromiumContent هي مكتبة مسؤولة عن اظهار المتصفح ان صح التعبير , وهي مبنية في نواة محرك Chromium وهي المسؤولة عن اظهار برنامجنا المبني بواسطة Electron js على شكل برنامج فعلي.

Node js

غنية عن التعريف , اطار عمل للغة جافاسكريبت يمكنك من تنفيذ الأكواد خارج اطار المتصفح ( على سيرفر مثلاً ) , كما تضيف امكانية تشغيل الأكواد ضمن المتصفح نفسه.

بدأ مشروع Node عام 2009 لتوفير امكانية انشاء تطبيقات بلغة جافاسكريبت قادرة على التواصل مع السيرفر , وياتي مضمناً معها مدير حزم يسمى npm وهو اختصار ل Node Package Manager يوفر لك الوصول لعدد لا محدود من الحزم الخاصة بلغة جافاسكريبت.

محرك جافاسكريبت V8 Javascript Engine

محرك جافاسكريبت مفتوح المصدر تم تطويره من قبل جوجل باستخدام لغات C++ و جافاسكريبت , وان كنت تريد التعرف أكثر على لغة جافاسكريبت , هذه المقالة قد تساعدك : ما هي جافاسكريبت ؟ وما فائدتها ؟ وكيف يمكنني تعلمها ؟

كيف يعمل Electron js ؟

في هذا القسم سنقوم بانشاء أول تطبيق على Electron js , سنفهم أولاً جزئية بسيطة , Electron js مكون من عمليتان , الأولى تسمى العملية الاساسية , وهدفها هي احياء البرنامج وتشغيله لكن بدون عرض اي نتائج على الشاشة , تقوم هذه العملية فقط بايقاظ البرنامج ان صح التعبير وتجهيزه للمرحلة التالية وهي مرحلة العرض

المرحلة الثانية هي العرض , بعد أن تم تجهيز البرنامج يبدأ عملية عرض البرنامج على الشاشة أو ما يسمى ب Rendering , يبدأ عرض واجهة الاستخدام على الشاشة واضافة الأحداث اليها وعرض المعلومات من السيرفر ان وجدت وغير ذلك .

و سنناقش العمليتين ضمن مشروعنا , سنقوم بانشاء برنامج Hello World باستخدام Electron js الآن.

انشاء أول برنامج باستخدام Electron js

لنبدأ أولاً بانشاء مجلد جديد في أي مكان في نظام الملفات لديك , وتحت الاسم الذي تختاره

لنضيف Electron نكتب الكود التالي في سطر الأوامر عندما نكون في المجلد الصحيح:

npm init
#OR
yarn init

سيطرح عليك بعض الأسئلة , كاسم التطبيق واصداره وغيره , اكتب ما تريد فيه. في النهاية , يجب على ملف Package.json أن يكون بالشكل التالي:

{
 "name""electron", #Name The App What Ever You Want"version""2.0.0","main""index.js",
 "license""MIT"
}

حددنا هنا الملف الرئيسي ليقوم بعمل ايقاظ للمشروع وهو index.js وحددنا اسم واصدار المشروع , واخيراً الرخصة .

الآن , في ملف package.json غير قيمة main لتصبح main.js بدلاً من index.js وقم باضافة اختصار لكود تشغيل المشروع , كنتيجة من المفترض أن يكون ملف package.json فيه الكود التالي:

{
 "name""electron", #Name The App What Ever You Want"version""2.0.0","main""main.js",
 "license""MIT",
 "scripts" : {
     "start":"electron ."
  }
}

الآن سنقوم بتنصيب Electron

npm install electron --save-dev
#OR
yarn add --dev electron 

سيقوم هذا الأمر بتنزيل حوالي 62 ميغابايت من الملفات أو أكثر قليلاً وهي فعلياً اطار العمل نفسه وبعض الحزم الأخرى.

الآن قم بانشاء ملف main.js في جذر المجلد .

لتشغيل التطبيق الآن , كل ما عليك فعله هو كتابة الكود التالي:

npm start
#OR
yarn start

كما ترى في مدير المهام , التطبيق لا يأخذ أي مساحة أو اي شيئ كونك لم تكتب أي أكواد للتطبيق , لكن الأهم أنه يعمل ! ولا داع للذعر ان لم يعمل التطبيق , قد تختلف النتائج من شخص لآخر و الأمر طبيعي , لكن في المرحلة القادمة يجب أن يعمل التطبيق والا فان هنالك مشكلة.

الآن سنبدأ بكتابة الكود ضمن التطبيق لاظهار رسالة مرحباً بالعالم المعهودة

اضف الكود التالي الى ملف 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
       })
 )
})

هذا الكود ببساطة وظيفته انشاء نافذة متصفح تبدو كبرنامج , الان بعد ان قمت باضافة الكود قم بتشغيل البرنامج مجدداً عبر أمر

npm start
#OR
yarn start

جميل! ظهر التطبيق أمامك صحيح ؟ لكن لا يوجد محتوى! سنبدأ الان باضافة المحتوى الى الشاشة الرئيسية للتطبيق , ويتم ذلك عبر التقنيات المعهودة html , css , قم بانشاء ملف index.html بجانب ملف main.js واكتب فيه الكود التالي :

<!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>

الآن قم بتشغيل البرنامج مجدداً , وستجد أمامك صفحة Hello World تم بنائها عبر Electron js !

أدوات اضافية لمبرمجي Electron js

الآن وقد قمنا بانشاء برنامجنا الأول , سنبدأ بالحديث عن الأدوات الاضافية التي تساعد مبرمجي Electron.

هذه الأدوات يحتاجها مبرمجو Electron لبناء تطبيقاتهم

Electron-prebuilt

يمكن تنصيبها من سطر الأوامر عبر مدير حزم npm

Electron-compile

لمساعدتك على استخدام احدث اصدار من جافاسكريبت , Sass , Less وغيرهم في بناء التطبيق دون الحاجة لتشغيل اي Compiler في الخلفية

Electron-packager

يحزم الملفات ويوزعها بشكل صحيح في تطبيقك

Devtron

الاصدار الرسمي من أدوات مطوري Electron , تساعدك في فهم الأخطاء واستكشافها اثناء عملية التطوير

Spectron

لمساعدتك على تشغيل التطبيق في متصفح انترنت بغرض الاختبار فقط , تستخدم محرك Chrome في العملية

جميع الاضافات السابقة مجانية , فقط عليك البحث عنها وتنصيبها في مشروعك باستخدام npm.

اختبر وتعلم Electron js , تعرف على أحدث اصدار !

مؤخراً ظهر آخر اصدار في Electron وهو الاصدار 6.0 , وفر هذا الاصدر العديد من الأمور المهمة كتحسين في ثبات اطار العمل وتسهيل في انجاز بعض المهام. يمكنك التعرف على القائمة كاملة من هنا : https://electronjs.org/releases/stable?version=6

في النهاية ...

ما رأيك في الفكرة بحد ذاتها ؟ أن تقوم ببرمجة موقع وبرنامج كمبيوتر وتطبيق جوال باستخدام نفس التقنيات وتقريباً نفس الأكواد ! اعتقد انها ميزة رائعة !

لن تكون خاتمة مملة , سنستعرض بعض التطبيقات المميزة التي تم انشائها بواسطة Electron ومن ثم سأترك رابط الموقع الرسمي حيث يمكنكم تصفح جميع التطبيقات .

Dot-Browser

متصفح جميل يستخدم واجهة Material Design من جوجل

Freelook

نسخة من Outlook (نسخة رسمية من مايكروسوفت)

Figma

مشابه ل Adobe XD لتصميم واجهات الاستخدام التفاعلية

VS Code , Atom

محرر أكواد

يمكنك تصفح القائمة الكاملة من الموقع الرسمي من هنا : https://electronjs.org/apps