mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Translated Quickstart to ru_RU

Browse source
This commit is contained in:
TyanNN 2016-04-30 13:54:19 +03:00
parent fe3c78ad84
commit dae63ec4f1
1 changed files with 225 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

225
docs-translations/ru-RU/tutorial/quick-start.md Normal file
View file

@ -0,0 +1,225 @@
# Быстрый старт
Electron позволяет вам делать приложения для рабочего стола на чистом JavaScript,
предоставляя среду с богатым API. Можете представлять его как Node.js, который
ориентирован на рабочий стол, а не веб сервера.
Это, однако, не значит, что Electron — лишь привязки к GUI билиотекам. На деле
Electron использует веб-страницы как интерфейс, так что вы можете считать его
небольшим Chroumium браузером, который контролируется с помощью JavaScript.
### Главный процесс
В Electron процесс, который запускает `main` из `package.json` называется
__главным процессом__. Скрипт, который работает в главном процессе может
показывать GUI, создавая веб-страницы.
### Процесс-рендерер
Так как Electron использует Chromium для показа веб-страниц,
мульти-процессовая архитектура показа страниц Chromium тоже используется.
Каждая веб-страницы в Electron работает в своём собственном процессе,
который называется __процесс-рендерер__.
В обычных браузерах веб-страницы обычно запускаются в "песочнице" и им недоступны
реальные ресурсы компьютера. Пользователи Electron же могут использовать API
Node.js на страницах, что допускает более низкоуровневую работу с операционной системой.
### Разница мужду главным процессом и процессом-рендерером
Главный процесс создаёт веб-страницы используя `BrowserWindow`. Каждый экземпляр
`BrowserWindow` показывает веб-страницу через свой собственный процесс-рендерер.
Если экземпляр `BrowserWindow` уничтожается, то и соответствующий процесс-рендерер тоже
завершается.
Главный процесс управляет всеми веб-страницами и соответствующими им процессами-редерерами.
Каждый процесс-рендерер изолирован и управляет только своей веб-страницей.
На веб-страницах не позволяется вызывать нативные API, которые управляют GUI,
потому что это очень опасно и может легко вызвать утечку ресурсов. Если вы хотите
выполнить действия с GUI на странице, процесс-рендерер этой страницы должен
"попросить" главный процесс сделать эти действия.
В Electron есть несолько способов общения между процессам. Например, модули
[`ipcRenderer`](../api/ipc-renderer.md) и [`ipcMain`](../api/ipc-main.md) используются
для отправки сообщений, а [remote](../api/remote.md) - для коммуникации в RPC стиле.
В ЧАВО также есть пункт о том, [как разделять информацию между страницами][share-data]
## Первое приложение на Electron
Как правило, приложение Electron структурировано следующим образом::
```text
your-app/
├── package.json
├── main.js
└── index.html
```
Формат `package.json` точно такой же, как у модулей Node и сприпт, объявленый
как `main`, будет выполняться при запуске вашего приложения, работая в
главном процессе. Например, ваш `package.json` может выглядеть вот так:
```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
// Удерживайте глобальное обращение к объекту окна, если вы так не сделаете, то
// окно само закроется после того, как объект будет собран сборщиком мусора.
let mainWindow
function createWindow () {
// Создаём окно браузера.
mainWindow = new BrowserWindow({width: 800, height: 600})
// и загружаем index.html приложения.
mainWindow.loadURL('file://' + __dirname + '/index.html')
// Открываем DevTools.
mainWindow.webContents.openDevTools()
// Будет выполнено, когда пользователь закроет окно
mainWindow.on('closed', function () {
//Убрать обращение на объект окна, обычно стоит хранить окна в массиве,
//если ваше приложение поддерживает несколько, сейчас стоит удалить
//соответствующий элемент.
mainWindow = null
})
}
//Этот метод будет вызван, когда Electron закончит инициализацию
//и будет готов создавать окна браузера.
//Некоторые API возможно использовать только послн того, как
//это произойдёт.
app.on('ready', createWindow)
// Выйти, если все окна закрыты
app.on('window-all-closed', function () {
//На OS X приложение и его строка меню обычно остаются активными,
//пока пользователь не завершит их с помощью Cmd + Q.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
//На OS X приложение обычно пересоздаёт окно, когда
//пользователь кликает на его иконку в доке, если не открыто
//других окон.
if (mainWindow === null) {
createWindow()
}
})
//В этот файл вы можете включить остальной код вашего главного процесса.
//Вы также можете разложить его по отдельным файлам и подключить с помощью require.
```
Наконец, `index.html`, страница, которую вы хотите показать:
```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>
```
## Запуск вашего приложения
Когда вы создали `main.js`, `index.html` и `package.json` вас скорее всего захочется
запустить ваше приложение, чтобы проверить, что оно работает так, как надо.
### electron-prebuilt
[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt) — `npm` модуль,
который содержит прекомпилированную версию Electron.
Если вы установили Electron глобально через `npm`, то вам нужно будет всего лишь
запустить сдедующее в папке вашего проекта:
```bash
electron .
```
Если вы установили Electron локально, то выполните это:
```bash
./node_modules/.bin/electron .
```
### Исполняемые файлы Electron, скачанные вручную
Если вы скачали Electron вручную, то вы можете использовать
исполняемые файлы прямо в папке вашего проекта.
#### Windows
```bash
$ .\electron\electron.exe your-app\
```
#### Linux
```bash
$ ./electron/electron your-app/
```
#### OS X
```bash
$ ./Electron.app/Contents/MacOS/Electron your-app/
```
`Electron.app` — часть реализного пакета Electron, вы можете скачать его
[тут](https://github.com/electron/electron/releases).
### Запустить как дистрибутив
Когда вы закончили написание вашего приложения, вы можете создать
дистрибутив, следуя инструкциям [отсюда](./application-distribution.md) и
затем запустить полученное приложение.
### Попробуйте этот пример
Скопируйте и запустите этот обучающий код, ичпользуя репозиторий [`atom/electron-quick-start`](https://github.com/electron/electron-quick-start)
**Заметка**: Для запуска требуется [Git](https://git-scm.com) и [Node.js](https://nodejs.org/en/download/) (который включает в себя [npm](https://npmjs.org)).
```bash
# Склонируйте репозиторий
$ git clone https://github.com/electron/electron-quick-start
# Перейдите в папку репозитория
$ cd electron-quick-start
# Установите зависимости и запустите
$ npm install && npm start
```
[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages