Electron - для разработки нативных приложений
Electron - Нативные приложения

Electron – для разработки нативных приложений

Опубликовано Автор: Дмитрий Поляков / Нет комментариев

Electron – фреймворк , разработанный GitHub. Позволяет разрабатывать нативные графические приложения для настольных операционных систем с помощью веб-технологий. Фреймворк включает в себя Node.js для работы с back-end и библиотеку рендеринга из Chromium.

Сайт: https://www.electronjs.org

Демонстрационное приложение Electron Api

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

Создаем пустое приложение

Для начала создадим файл package.json, например такой:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js"
}

Если нужно запускать обычное node приложение, через npm start, то файл package.json, можно записать так:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "node ."
  }
}

Для electron пишем так:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Устанавливаем electron:

npm install --save-dev electron

Создаем необходимые файлы

Файл main.js

// Модули для управления приложением и создания окна
const {app, BrowserWindow} = require('electron')
function createWindow () {
  // Создаем окно браузера.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // и загрузить index.html приложения.
  mainWindow.loadFile('index.html')

  // Отображаем средства разработчика.
  mainWindow.webContents.openDevTools()
}

// Этот метод вызывается когда приложение инициализируется
// и будет готово для создания окон.
// Некоторые API могут использоваться только после возникновения этого события.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // На MacOS обычно пересоздают окно в приложении,
    // после того, как на иконку в доке нажали и других открытых окон нету.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Выйти когда все окна закрыты
app.on('window-all-closed', function () {
  // Для приложений и строки меню в macOS является обычным делом оставаться
  // активными до тех пор, пока пользователь не выйдет окончательно используя Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

// В этом файле вы можете включить остальную часть основного процесса вашего приложения
//  Вы также можете поместить их в отдельные файлы и подключить через require.

Файл index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <title>ДП Конфигуратор</title>
  </head>
  <body>
    <h1>Привет мир!</h1>
    Вы юзаете 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>.

    <!-- Вы также можете добавить другие файлы для запуска в этом процессе -->
    <script src="./renderer.js"></script>
  </body>
</html>

Файл renderer.js – пока пустой

Настраиваем обмен между клиентской частью и серверной

В файле index.html добавим кнопку

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <title>ДП Конфигуратор</title>
  </head>
  <body>
    <h1>Привет мир!</h1>
    Вы юзаете 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>.
    <div>
      <button id="start">Кликни меня</button>
    </div>


    <!-- Вы также можете добавить другие файлы для запуска в этом процессе -->
    <script src="./renderer.js"></script>
  </body>
</html>

В файл main.js – добавляем ipcMain. В основном процессе он обрабатывает асинхронные и синхронные сообщения, отправленные из процесса рендеринга (веб-страницы)

// Модули для управления приложением и создания окна
const {app, BrowserWindow, ipcMain} = require('electron')

function createWindow () {
  // Создаем окно браузера.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // и загрузить index.html приложения.
  mainWindow.loadFile('index.html')

  // Отображаем средства разработчика.
  mainWindow.webContents.openDevTools()
}

// Этот метод вызывается когда приложение инициализируется
// и будет готово для создания окон.
// Некоторые API могут использоваться только после возникновения этого события.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // На MacOS обычно пересоздают окно в приложении,
    // после того, как на иконку в доке нажали и других открытых окон нету.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Выйти когда все окна закрыты
app.on('window-all-closed', function () {
  // Для приложений и строки меню в macOS является обычным делом оставаться
  // активными до тех пор, пока пользователь не выйдет окончательно используя Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

// В этом файле вы можете включить остальную часть основного процесса вашего приложения
//  Вы также можете поместить их в отдельные файлы и подключить через require.

ipcMain.on('start-main', (event, arg) => {
  console.log(arg);
  event.reply('start-reply', 'pong');
})

Файл renderer.js

const { ipcRenderer } = require('electron');

var start = document.getElementById('start');
start.addEventListener('click', () => {
  ipcRenderer.send('start-main', 'ping')
}, false)

ipcRenderer.on('start-reply', (event, arg) => {
  console.log(arg);
})
Дмитрий Поляков

Оставить комментарий