ساخت یک اپلیکیشن دسکتاپ جستجوی سفارشی گوگل با Electron

electron فریمورکی هست که به شما اجازه میده اپلیکیشن های دسکتاپ رو توسط HTML و جاوا اسکریپت توسعه بدید. از طریق این لینک میتونید آموزش ساخت اپلیکیشن دسکتاپ با استفاده از node-webkit رو مشاهده کنید که یک پروژه تستی با تکنولوژی وب native بود.

Atom shell پروژه ای بود که الان Electron شده, یک ابتکار عمل توسط گیت هاب برای توسعه ی اپلیکیشن های دسکتاپ توسط تکنولوژی های وب native. ویرایشگر متن Atom هم توسط electron نوشته شده.

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

ساختار پروژه

این ساختار پروژه ی ماست :

|-- index.html

|-- main.js

|-- package.json

|-- node-modules

main.js شامل کدهایی میشه که electron برای اجرا نیاز داره. کد برای اکثر زمینه ها استاندارد هست. این شامل سایر پنجره و رویدادهای مختلفی هست که برای هر پنجره خاص تعیین میشه.

این فایل پکیج هست :

//package.json
{
  "name": "electron-google-custom-app",
  "version": "1.0.0",
  "description": "A simple electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.36.0"
  }
}

این دستور رو در ترمینال مسیر پروژه بزنید تا ماژول های الکترون نصب بشه :

npm install

کد Electron

Main.js فایل الکترون هست که فایل html رو اجرا و بارگذاری میکنه. فایل html باید نقطه ورودی اپلیکیشن باشه, در این مورد کد سفارشی جستجوی گوگل خواهد بود :

var electron = require('electron');
var app = require('app');
var BrowserWindow = require('browser-window');

// Global reference to keep the instance of window until closed by User else it will be closed when JavaScript do Garbage collection.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // Load the app from HTML file.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

توضیحات

برای جلوگیری از اینکه جاوا اسکریپت reference های ما رو بعنوان آبجکت زائد نشناسه, ما از global reference استفاده می کنیم. اگر جاوا اسکریپت آبجکت شما رو جمع آوری کنه پنجره بصورت خودکار بسته میشه و این چیزی نیست که ما بخواهیم.

وقتی پنجره بسته بشه ما چک میکنیم چه سیستم عاملی داره اجرا میشه, اگر سیستم عامل مک بود تا وقتی که کاربر کلید CTRL+Q رو نزنه پنجره و title bar فعال باقی می مونند.

اگر سیستم مک نباشه براحتی پنجره بسته میشه.

وقتی الکترون آماده شد ما پنجره رو با در نظر گرفتن سایر و ارسال مسیر فایل html می سازیم.

index.html

این کد جاوا اسکرپت و html ماست :

<!DOCTYPE html>
<html>
  <head>
    <title>Google search electron application</title>
    <script>
  (function() {
    var cx = '003755108644811522381:v-_sebdsjeg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
  </head>
  <body style="padding:50px;">
    <img SRC="google_custom_logo.png" style="height: 95px;width: 269px;margin-left:150px;"></img>
    <gcse:searchbox></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
  </body>
</html>

با استفاده از دستور npm start برنامه رو اجرا کنید.

شما یک پنجره خواهید دید که قابلیت جستجوی گوگل رو فراهم می کنه.

منبع