Создание десктопного приложения с помощью Electron и веб-технологий

Знакомство с Electron

Официальная страница проекта Electron.

Изначально Electron был разработан для редактора Atom компанией GitHub.

Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.

Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.

Таким образом это не что иное как среда в которой будет выполнятся наше веб приложение.

На текущий момент Electron v0.35.0 включает в себя:

  • Node: 4.1.1
  • Chromium: 45.0.2454.85
  • V8: 4.5.103.294

Альтернативой для Electron является проект NW.js (ранее известный как node-webkit). О различиях можно почитать здесь.

Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.

Интерфейсом взаимодействия с пользователем является созданная нами веб-страница. В данном случае мы не ограничены системным набором элементов интерфейса нашей платформы и можем создавать нужные нам UI элементы с помощью веб-технологий. А учитывая, что в коробочке у нас один из самых продвинутых браузеров, мы можем использовать самые новые веб-технологии.

Я предполагаю, что вы будете использовать ваш основной текстовый редактор (или IDE), и у вас установлен Node.js/npm. Я также надеюсь, что у вас есть знания HTML/CSS/JavaScript (знания Node.js не помешали бы, но не является обязательными) так что я могу не беспокоится о вашем понимании создания веб-страниц. Если же таких знаний нет, то вы, наверное, будете чувствовать себя несколько потерянными, и я рекомендую вам вначале изучить основы веб-разработки.

Итак, как же работает Electron.

Входной точкой является основной файл определенный в файле package.json, именно он и выполняется, когда стартует ваше приложение. В этом основном файле (который обычно называется main) создаются окна приложения, в которых происходит рендеринг и отображение веб-страниц с дополнительною возможностью взаимодействия с нативным GUI вашей операционной системы. Процесс, который запускает основной скрипт, называется основной процесс (main process).

Electron использует Chromium для отображения веб-страниц, мульти-процессорная архитектура Chromium тоже используется. Каждая веб-страница в Electron запускается в своем собственном процессе, который называется рендер процессом (renderer process).

В обычном браузере веб-страницы запускаются в закрытом окружении (так называемой песочнице) и не имеют доступ к нативным ресурсам. Пользователи Electron, однако, имеют возможность использовать Node.js API на веб-страницах, имея доступ к взаимодействию с операционной системой на низком уровне.

Исходя из того, что мы уже знаем, для создания самого простого приложения нам нужно всего три файла:

package.json
main.js
index.html

Напишем простое приложение Hello world

Наше первое приложение будет выводит информацию о версиях тех частей, которые входят в Electron.

package.json в нашем случае будет выглядеть так:

{
  "name"    : "electron-simple-app",
  "version" : "0.0.1",
  "main"    : "main.js"
}

«name»: «electron-simple-app» — это имя для вашего приложения;
«version»: «0.0.1» — это его версия, соответственно;
«main»: «main.js» — и основной скрипт.

Если поле main не будет указано в pakage.json, то по умолчанию Electron будет пытаться загрузить index.js файл.

В main.js мы должны создать окно нашего приложения и обрабатывать системные события, вот так будет выглядеть основной скрипт нашего приложения:

const electron = require('electron');
const app = electron.app;  // Модуль контролирующей жизненный цикл нашего приложения.
const BrowserWindow = electron.BrowserWindow;  // Модуль создающий браузерное окно.

// Опционально возможность отправки отчета о ошибках на сервер проекта Electron.
electron.crashReporter.start();

// Определение глобальной ссылки , если мы не определим, окно
// окно будет закрыто автоматически когда JavaScript объект будет очищен сборщиком мусора.
var mainWindow = null;

// Проверяем что все окна закрыты и закрываем приложение.
app.on('window-all-closed', function() {
  // В OS X обычное поведение приложений и их menu bar
  //  оставаться активными до тех пор пока пользователь закроет их явно комбинацией клавиш Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Этот метод будет вызван когда Electron закончит инициализацию 
// и будет готов к созданию браузерных окон.
app.on('ready', function() {
  // Создаем окно браузера.
  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;
  });
});

index.html — это веб-страница которую мы хотим отобразить:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</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>

Репозиторий с кодом — https://github.com/DangelZM/electron-simple-app.

Когда вы создадите все файлы или склоните репозиторий, вы захотите попробовать запустить ваше приложение локально и проверить, работает ли оно как задумано.

Для запуска приложения нам понадобится модуль electron-prebuilt.

Его мы можем с помощью npm поставить глобально или локально в наше приложение.

В случае глобальной установки для запуска приложения мы выполняем в корне нашего приложения команду:

electron .

В случае локальной установки выполняем:

./node_modules/.bin/electron .

В подготовленном мной репозитории для запуска приложения вам нужно установить зависимости:

npm install 

и запустить скрипт с помощью npm:

npm start

Пример запуска созданного приложения можно посмотреть на видео ниже:

Поделиться публикацией

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 33

    +1
    Прощу прощения за снобизм, но это все-таки не GitHub Electron, а просто Electron. Ранее был известен как Atom Shell.
      +2
      Formerly known as Atom Shell. Made with love by GitHub.
        +1
        Мои коллеги тоже указали мне на это. Но такое определение встречал в зарубежных статьях.
        +5
        Дельная статья, збазибо
          +2
          Если говорим о стандалоне прикладах, то наверное следует дополнить статью про билдер (пакер) в эти самые приложения.
          $ npm i electron-packager --save-dev
          

          // package.json
          "scripts": {
            "build": "electron-packager . MyTestApp --ignore=node_modules/electron*" //пакуем в приложение и избавляемся от лишних зависимостей
          }
          

          И, собственно, пакуем:
          $ npm run build
          
            +1
            Спасибо за дополнение, думаю об этом буду писать отдельную статью.
              +1
              И ещё electron-builder, чтобы инсталлятор сделать.
                +1
                Спасибо, добавлю и это в следующую статью
              +2
              Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.

              Это и плюс, и минус. В качестве UI можно налепить что угодно, но очень сложно сделать так, чтобы это потом выглядело и работало как настольное приложение, а не как веб-страница в отдельном окне. Очень мало толковых вариантов для создания именно настольного UI. И разработчики Atom не спешат релизить те компоненты, которые они сами используют.
              Кто хочет писать настольные приложения на JavaScript, советую глянуть на react native desktop. Он пока нестабильный, но активно пилится.
                0
                ИМХО ExtJS компоненты очень похоже на десктоп выглядят. Я как то с ними баловался в десктомпном приложении (только использоват QtWebkit) — выглядело прилично.
                +2
                Укажите ссылку на первоисточник, у вас же перевод официального туториала на русский язык.
                  0
                  И не нужно плодить сущности — вот официальный репозиторий (atom/electron-quick-start) для быстрого старта с абсолютно идентичным кодом.
                    0
                    Сомневаюсь в идентичности репозиториев, diff вам в помощь. По поводу первоисточника в написании статьи я использовал 4 источника включая мысли от себя. И рад, что есть люди которым этот материал оказался полезен.
                  –2
                  file://?

                  Очень хорошо. Хакеры уже ждут вас и вашу файловую систему.
                    +8
                    Это же локальное приложение, оно и так имеет доступ к файловой системе.
                      –3
                      Подробнее здесь habrahabr.ru/company/dsec/blog/272017
                        +8
                        Вы не поняли. Это не виджет с изолированной областью файловой системы, это обычное десктопное приложение, разработчик которого и так имеет полный доступ к файловой системе машины, на которой запускается программа. Т.е. если не «file://», то «fs.». Это же как программа на C, C#, JavaSE, Delphi — и так есть полный доступ ко всему, это предусмотренное поведение.
                          –2
                          Согласен с вашим мнением.
                    0
                    Расскажите лучше, как собирать пакет с приложением, использующим нативные плагины.
                    Делал утилиту для просмотра точек на карте Google Maps, точки грузил из SQLite. Для SQLite расширение собирается через node-gyp, вот я, помню, попрыгал. Слава богу нужно было только под одну платформу.
                      0
                      Тоже не однократно сталкивался с проблемами node-gyp. В большинстве случаев решалось без особых проблем. Если у вас есть интересный опыт решения сложных проблем которые могут возникнуть напишите статью, я буду очень признателен, как и многие.
                        0
                        Пардон за слоупостинг.
                        В Вашем случае отлично подойдет electron-rebuild, Удобен и пока что не подводил.
                        0
                        Если в Electron завёрнута удалённая веб-страница с X-Frame-Options: DENY, как с этим бороться? Конкретный пример с Myrrord: github.com/mikethedj4/Myrrord/issues/1
                          +1
                          Напишу честно, не сталкивался с такой проблемой так как не использовал внешние веб-страницы. Постараюсь изучить как можно ли вообще обойти это ограничение, и если можно то как. Напишите пожалуйста мне лично какую страницу можно в целях тестирования использовать.
                          0
                          Доброго времени суток) есть у этого заморского чуда, возможность задать максимальные размеры окна (max-width, max-height)?
                            +1
                            Конечно :) Параметры `maxWidth` и `maxHeight` у BrowserWindow для установки максимальной ширины и высоты окна соответственно.

                            https://github.com/atom/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions
                            –1
                            Посоны выручайте, Electron с jQuery не хочет работать… В браузере все норм, в Electron'е devTools выдает:
                            Uncaught ReferenceError: jQuery is not defined(anonymous function) @ index.html:11
                            
                              +1
                              Решаю проблему так
                              window.$ = window.jQuery = require('../bower_components/jquery/dist/jquery.min.js');
                              
                              0
                              скопировал исходники со статьи
                              командой electron. все нормально запускается
                              но при попытке собрать все в пакет получаю следующее.
                              (если кто знает причину и имеет решение, ткните носом, а то весь день мучаюсь.)

                              npm run build
                              > electron-simple-app@0.0.1 build /home/roman/work/electron/apps/electron-simple-app-master
                              > electron-packager. electron-simple-app --ignore=node_modules/electron*



                              npm ERR! Linux 3.16.7-7-desktop
                              npm ERR! argv "/usr/bin/node" "/usr/bin/npm" «run» «build»
                              npm ERR! node v4.2.2
                              npm ERR! npm v3.5.2
                              npm ERR! code ELIFECYCLE
                              npm ERR! electron-simple-app@0.0.1 build: `electron-packager ./ electron-simple-app --ignore=node_modules/electron*`
                              npm ERR! Exit status 1
                              npm ERR!
                              npm ERR! Failed at the electron-simple-app@0.0.1 build script 'electron-packager. electron-simple-app --ignore=node_modules/electron*'.
                              npm ERR! Make sure you have the latest version of node.js and npm installed.
                              npm ERR! If you do, this is most likely a problem with the electron-simple-app package,
                              npm ERR! not with npm itself.
                              npm ERR! Tell the author that this fails on your system:
                              npm ERR! electron-packager. electron-simple-app --ignore=node_modules/electron*
                              npm ERR! You can get information on how to open an issue for this project with:
                              npm ERR! npm bugs electron-simple-app
                              npm ERR! Or if that isn't available, you can get their info via:
                              npm ERR! npm owner ls electron-simple-app
                              npm ERR! There is likely additional logging output above.

                              npm ERR! Please include the following file with any support request:
                              npm ERR! /home/user/work/electron/apps/electron-simple-app-master/npm-debug.log


                              npm-debug.log
                              0 info it worked if it ends with ok
                              1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
                              2 info using npm@3.5.2
                              3 info using node@v4.2.2
                              4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
                              5 info lifecycle electron-simple-app@0.0.1~prebuild: electron-simple-app@0.0.1
                              6 silly lifecycle electron-simple-app@0.0.1~prebuild: no script for prebuild, continuing
                              7 info lifecycle electron-simple-app@0.0.1~build: electron-simple-app@0.0.1
                              8 verbose lifecycle electron-simple-app@0.0.1~build: unsafe-perm in lifecycle true
                              9 verbose lifecycle electron-simple-app@0.0.1~build: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/user/work/electron/apps/electron-simple-app-master/node_modules/.bin:/home/user/bin/Sencha/Cmd/6.0.2.14/..:/home/user/bin/Sencha/Cmd/6.0.2.14/..:/home/ruser/bin:/usr/local/bin:/usr/bin:/bin:/usr/bin/X11:/usr/games
                              10 verbose lifecycle electron-simple-app@0.0.1~build: CWD: /home/user/work/electron/apps/electron-simple-app-master
                              11 silly lifecycle electron-simple-app@0.0.1~build: Args: [ '-c',
                              11 silly lifecycle 'electron-packager. electron-simple-app --ignore=node_modules/electron*' ]
                              12 silly lifecycle electron-simple-app@0.0.1~build: Returned: code: 1 signal: null
                              13 info lifecycle electron-simple-app@0.0.1~build: Failed to exec build script
                              14 verbose stack Error: electron-simple-app@0.0.1 build: `electron-packager ./ electron-simple-app --ignore=node_modules/electron*`
                              14 verbose stack Exit status 1
                              14 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
                              14 verbose stack at emitTwo (events.js:87:13)
                              14 verbose stack at EventEmitter.emit (events.js:172:7)
                              14 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14)
                              14 verbose stack at emitTwo (events.js:87:13)
                              14 verbose stack at ChildProcess.emit (events.js:172:7)
                              14 verbose stack at maybeClose (internal/child_process.js:818:16)
                              14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
                              15 verbose pkgid electron-simple-app@0.0.1
                              16 verbose cwd /home/user/work/electron/apps/electron-simple-app-master
                              17 error Linux 3.16.7-7-desktop
                              18 error argv "/usr/bin/node" "/usr/bin/npm" «run» «build»
                              19 error node v4.2.2
                              20 error npm v3.5.2
                              21 error code ELIFECYCLE
                              22 error electron-simple-app@0.0.1 build: `electron-packager. electron-simple-app --ignore=node_modules/electron*`
                              22 error Exit status 1
                              23 error Failed at the electron-simple-app@0.0.1 build script 'electron-packager. electron-simple-app --ignore=node_modules/electron*'.
                              23 error Make sure you have the latest version of node.js and npm installed.
                              23 error If you do, this is most likely a problem with the electron-simple-app package,
                              23 error not with npm itself.
                              23 error Tell the author that this fails on your system:
                              23 error electron-packager. electron-simple-app --ignore=node_modules/electron*
                              23 error You can get information on how to open an issue for this project with:
                              23 error npm bugs electron-simple-app
                              23 error Or if that isn't available, you can get their info via:
                              23 error npm owner ls electron-simple-app
                              23 error There is likely additional logging output above.
                              24 verbose exit [ 1, true ]


                                0
                                Проверте формат вызова electron-packager:

                                electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<Electron version> [optional flags...]
                                


                                Во первых мне кажется у вас нет пробела между electron-packager и точкой которая указывает
                                  0
                                  пробел есть, когда вставляю сюда он пропадает
                                0
                                Во вторых у меня были проблемы если не указывать --platform=____
                                По умолчанию если не указано подразумевается как --platform=all, и пакуется под все доступные платформы, по этому изначально пробуйте только под свою ОС собирать.

                                У меня вызов выглядит так:
                                electron-packager . AppName --platform=win32 --arch=x64 --version=0.33.3 --out=./Release --overwrite --ignore=Release
                                
                                  0
                                  Спасибо за подсказки. Пробовал собиать под все ОС вместе и под каждую в отдельности, и для разных архитектур, результат тот же.
                                  +1
                                  Для того чтобы с каждым моделум не мудохаться, можно, к примеру, использовать Bozon. Им и стартовать приложение можно и тесты запускать и паковать.

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое