2016-04-30 10:54:19 +00:00
# Быстрый старт
2016-06-09 08:38:28 +00:00
Electron позволяет Вам делать приложения для рабочего стола на чистом JavaScript,
предоставляя среду с богатым API. Можете представлять е г о как Node.js приложение, которое
ориентировано для рабочего стола, а не для веб сервера.
2016-04-30 10:54:19 +00:00
2016-06-09 08:38:28 +00:00
Однако это не значит, что Electron — лишь привязка к GUI билиотекам. Н а деле
Electron использует веб-страницы как интерфейс, так что Вы можете считать е г о
2016-04-30 10:54:19 +00:00
небольшим Chroumium браузером, который контролируется с помощью JavaScript.
### Главный процесс
В Electron процесс, который запускает `main` из `package.json` называется
__г ла вным пр о це с с о м__. Скрипт, который работает в главном процессе может
показывать GUI, создавая веб-страницы.
### Процесс-рендерер
Так как Electron использует Chromium для показа веб-страниц,
мульти-процессовая архитектура показа страниц Chromium тоже используется.
2016-06-09 08:38:28 +00:00
Каждая веб-страница в Electron работает в своём собственном процессе,
2016-04-30 10:54:19 +00:00
который называется __пр о це с с -р е нде р е р __ .
В обычных браузерах веб-страницы обычно запускаются в "песочнице" и им недоступны
2016-06-09 08:38:28 +00:00
реальные ресурсы компьютера. Пользователи Electron напротив могут использовать API
2016-04-30 10:54:19 +00:00
Node.js на страницах, что допускает более низкоуровневую работу с операционной системой.
### Разница мужду главным процессом и процессом-рендерером
Главный процесс создаёт веб-страницы используя `BrowserWindow` . Каждый экземпляр
`BrowserWindow` показывает веб-страницу через свой собственный процесс-рендерер.
Если экземпляр `BrowserWindow` уничтожается, то и соответствующий процесс-рендерер тоже
завершается.
Главный процесс управляет всеми веб-страницами и соответствующими им процессами-редерерами.
Каждый процесс-рендерер изолирован и управляет только своей веб-страницей.
Н а веб-страницах не позволяется вызывать нативные API, которые управляют GUI,
потому что это очень опасно и может легко вызвать утечку ресурсов. Если вы хотите
выполнить действия с GUI на странице, процесс-рендерер этой страницы должен
"попросить" главный процесс сделать эти действия.
В Electron есть несолько способов общения между процессам. Например, модули
[`ipcRenderer` ](../api/ipc-renderer.md ) и [`ipcMain` ](../api/ipc-main.md ) используются
для отправки сообщений, а [remote ](../api/remote.md ) - для коммуникации в RPC стиле.
2016-06-09 08:38:28 +00:00
В FAQ также есть пункт о том, [как разделять информацию между страницами][share-data]
2016-04-30 10:54:19 +00:00
## Первое приложение на Electron
2016-06-09 08:38:28 +00:00
Как правило, приложение Electron структурировано следующим образом:
2016-04-30 10:54:19 +00:00
```text
your-app/
├── package.json
├── main.js
└── index.html
```
2016-06-09 08:38:28 +00:00
Формат `package.json` точно такой же, как у модулей Node и скрипт, объявленый
2016-04-30 10:54:19 +00:00
как `main` , будет выполняться при запуске вашего приложения, работая в
2016-06-09 08:38:28 +00:00
главном процессе. Например, Ваш `package.json` может выглядеть вот так:
2016-04-30 10:54:19 +00:00
```json
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
```
__З а ме тка __: Если поле `main` отсутствует в `package.json` , Electron попробует
загрузить `index.js` .
`main.js` должен создавать окно и управлять системными событиями,
типичный пример:
```javascript
const electron = require('electron')
// Модуль, контролирующий основное: сам Electron.
const app = electron.app
// Модуль, создающий окно приложения.
const BrowserWindow = electron.BrowserWindow
2016-06-09 08:38:28 +00:00
// Удерживайте глобальное обращение к объекту окна, если Вы так не сделаете, то
2016-04-30 10:54:19 +00:00
// окно само закроется после того, как объект будет собран сборщиком мусора.
let mainWindow
function createWindow () {
2016-06-09 08:38:28 +00:00
// Создаём окно браузера
2016-04-30 10:54:19 +00:00
mainWindow = new BrowserWindow({width: 800, height: 600})
// и загружаем index.html приложения.
mainWindow.loadURL('file://' + __dirname + '/index.html')
// Открываем DevTools.
mainWindow.webContents.openDevTools()
// Будет выполнено, когда пользователь закроет окно
mainWindow.on('closed', function () {
2016-06-09 08:38:28 +00:00
// Убрать обращение на объект окна, обычно стоит хранить окна в массиве,
// если ваше приложение поддерживает несколько, сейчас стоит удалить
// соответствующий элемент.
2016-04-30 10:54:19 +00:00
mainWindow = null
})
}
//Этот метод будет вызван, когда Electron закончит инициализацию
//и будет готов создавать окна браузера.
2016-05-18 15:04:52 +00:00
//Некоторые API возможно использовать только после того, как
2016-04-30 10:54:19 +00:00
//это произойдёт.
app.on('ready', createWindow)
// Выйти, если все окна закрыты
app.on('window-all-closed', function () {
//Н а OS X приложение и е г о строка меню обычно остаются активными,
2016-06-09 08:38:28 +00:00
//пока пользователь не завершит их с помощью `Cmd + Q` .
2016-04-30 10:54:19 +00:00
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
//Н а OS X приложение обычно пересоздаёт окно, когда
//пользователь кликает на е г о иконку в доке, если не открыто
//других окон.
if (mainWindow === null) {
createWindow()
}
})
2016-06-09 08:38:28 +00:00
//В этот файл Вы можете включить остальной код вашего главного процесса.
2016-04-30 10:54:19 +00:00
//Вы также можете разложить е г о по отдельным файлам и подключить с помощью require.
```
2016-06-09 08:38:28 +00:00
Наконец, `index.html` , страница, которую Вы хотите показать:
2016-04-30 10:54:19 +00:00
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title > Hello World!< / title >
< / head >
< body >
< h1 > Привет, мир!< / h1 >
Мы используем Node < script > document . write ( process . versions . node ) < / script > ,
Chrome < script > document . write ( process . versions . chrome ) < / script > ,
и Electron < script > document . write ( process . versions . electron ) < / script > .
< / body >
< / html >
```
## Запуск вашего приложения
2016-06-09 08:38:28 +00:00
После того как Вы создали `main.js` , `index.html` и `package.json` Вам скорее всего захочется
запустить приложение, чтобы проверить, что оно работает так, как надо.
2016-04-30 10:54:19 +00:00
### electron-prebuilt
[`electron-prebuilt` ](https://github.com/electron-userland/electron-prebuilt ) — `npm` модуль,
который содержит прекомпилированную версию Electron.
2016-06-09 08:38:28 +00:00
Если вы установили Electron глобально через `npm` , то Вам нужно будет всего лишь
2016-04-30 10:54:19 +00:00
запустить сдедующее в папке вашего проекта:
```bash
electron .
```
2016-06-09 08:38:28 +00:00
Если Вы установили Electron локально, то выполните это:
2016-04-30 10:54:19 +00:00
```bash
./node_modules/.bin/electron .
```
### Исполняемые файлы Electron, скачанные вручную
2016-06-09 08:38:28 +00:00
Если Вы скачали Electron вручную, то Вы можете использовать
2016-04-30 10:54:19 +00:00
исполняемые файлы прямо в папке вашего проекта.
#### Windows
```bash
$ .\electron\electron.exe your-app\
```
#### Linux
```bash
$ ./electron/electron your-app/
```
#### OS X
```bash
$ ./Electron.app/Contents/MacOS/Electron your-app/
```
2016-06-09 08:38:28 +00:00
`Electron.app` — часть реализного пакета Electron, Вы можете скачать е г о
2016-04-30 10:54:19 +00:00
[тут ](https://github.com/electron/electron/releases ).
### Запустить как дистрибутив
2016-06-09 08:38:28 +00:00
Когда Вы закончили написание вашего приложения, Вы можете создать
2016-04-30 10:54:19 +00:00
дистрибутив, следуя инструкциям [отсюда ](./application-distribution.md ) и
затем запустить полученное приложение.
### Попробуйте этот пример
2016-06-09 08:38:28 +00:00
Скопируйте и запустите этот обучающий код, используя репозиторий [`atom/electron-quick-start` ](https://github.com/electron/electron-quick-start )
2016-04-30 10:54:19 +00:00
**Заметка**: Для запуска требуется [Git ](https://git-scm.com ) и [Node.js ](https://nodejs.org/en/download/ ) (который включает в себя [npm ](https://npmjs.org )).
```bash
2016-06-09 08:38:28 +00:00
# Клонируем репозиторий
2016-04-30 10:54:19 +00:00
$ git clone https://github.com/electron/electron-quick-start
2016-06-09 08:38:28 +00:00
# Переходим в папку скачанного репозитория
2016-04-30 10:54:19 +00:00
$ cd electron-quick-start
2016-06-09 08:38:28 +00:00
# Устанавливаем зависимости и запускаем
2016-04-30 10:54:19 +00:00
$ npm install & & npm start
```
[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages