كل ما تحتاج لمعرفته عن إلكترون تجده هنا


شاهد هذه السلسلة اخي الكريم بها شرح مفصل




لسلام عليكم اخوتي  الكرام  وتحية خاصة #لتجمع المبرمجين  والمطورين العرب 
صار بامكانك اخي  الكريم بيع تطبيقاتك بدون وساطة على مجموعة  #سوق المبرمجين 
🌷🌷🌷🌷🌷🌷🌷🌷

يمكنك اخي الكريم  متابعة سلسلة بناء تطبيقات #google chrome

----------- 
قبل تحميل  إلكترون  تحتاج أخي الكريم إلى  تحميل NODEJS و NPM INIT    

في حالة كان  نظام تشغيلك ويندوز فإنك تقوم بإنشاء ملف في C مثلا C:\Electron وتقوم بالضغط على shift+الزر الايمن للفأرة سيظهر لك خيار لإختيار صندوق الكوموند بالاسود  تكتب فيه الأمر  التالي لبناء ملف json تضع فيه جل  المعلومات
   npm init
بعدها تقوم بكتابة بعض الخصائص كالعنوان  ونسخة التطبيق وغيرها 
ثم  امام  خيار index.js تكتب main.js ثم  تضغط على yes  لبناء  الملف الأن نقوم ببناء ملف بإسم المشروع مثلا myproject  ثم  نضغط بنفس  الطريقة  على shift+الزر الايمن للفارة  ونختار فتح صندوق الكوموند بالاسود ونكتب  فيه الامر  التالي  لتنزيل Electron
npm install electron --save-dev --verbose


 الان  ننتظر حتى يتم  التحميل  ونقوم ببناء ملف  main.js ونقوم بكتابة الكود التالي  فيه

const electron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;

var mainWindow;
app.on('ready',function(){
mainWindow = new BrowserWindow({width: 1024, height: 768,backgroundColor: '#2e2c29'});
//mainWindow.loadURL('https://google.com');
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
});


ثم بعد ذلك  نتجه الى ملف json ونقوم بتعديل  السطر التالي حتى يعمل  لنا  التطبيق 
"scripts": {
    "start": "electron ."
  },

ثم لتشغيل التطبيق  تكتب  الامر  التالي  في  الدوس تبع ملف  المشروع  : npm start

إذا عمل معك فكل شيء تمام  الان  نتوجه الى  تحزيم المشروع بتحميلها عبر الكود التاالي 
npm install -g electron-packager
 حتى يتسنى للمستخدمين  تشغيله في حالة كنت  تريد  تحزيم المشروع افتراضيا فانه يتخد من جهازك  معطياته للتحزيم
electron-packager .  
ولتشفير هذه التحزيمة  نختار التالي 
electron-packager . --asar
ولتحزيم الجميع لكي يعمل تطبيقك على  جميع انظمة التشغيل كالماك  والويندوز  واللنكس تكتب  الامر التالي 

electron-packager . --all

الان  تبقى لنا مشكلة  وهي عدم استجابة المشروع لملفات الجيكويري  وهذا يشكل مشكلة لنا  ستحتاج لتعريف  الجيكويري داخل ملف الاندكس 
<script>window.$ = window.jquery = require('./jquery.js');</script>
الان  الكل تماما   لكي نكمل تطبيقنا  الكترون  ونريد  مثلا بناء  تطبيق متقدم  ومتصل  بقواعد البينات  سنحتاج  الى  ربطه بقواعد البينات  نقوم بتحميل  الباكتج الخاص  بربطه بقواعد البينات  
nmp install mysql 
ثم نقوم بكتابة الكود التالي  
<html>
<head>
<script>window.$ = window.jQuery = require('jquery.js');</script>
</head>
<body>
<h1>Electron MySQL Example</h1>
<div id="resultDiv"></div>
<script>
var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'aqwzsxedc',
  database : 'reg'
});

connection.connect();

var sql = 'SELECT `id`,`name` FROM `users`';

connection.query(sql, function (error, results, fields) {
 if (error) console.log(error.code);
 else {
     console.log(results);
     $('#resultDiv').text(results[6].name); 
 }
});
connection.end(); 
</script> 
</body> 
</html>
للمزيد من المعلومات  تابع الشرح التالي #npmMysql

🌷🌷🌷🌷🌷🌷🌷🌷
إنتهى بفضل اللّه





Post a Comment

0 Comments