@DangelZM1 дек 2015 в 12:06

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

4 мин

68K

HTML * JavaScript * Node.JS *

Из песочницы

+19

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

@dannyzubarev 1 дек 2015 в 12:30

Прощу прощения за снобизм, но это все-таки не GitHub Electron, а просто Electron. Ранее был известен как Atom Shell.

@sokal32 1 дек 2015 в 12:41

Formerly known as Atom Shell. Made with love by GitHub.

@DangelZM 1 дек 2015 в 12:42

Мои коллеги тоже указали мне на это. Но такое определение встречал в зарубежных статьях.

@sokal32 1 дек 2015 в 12:40

Дельная статья, збазибо

@beaverBox 1 дек 2015 в 12:48

Если говорим о стандалоне прикладах, то наверное следует дополнить статью про билдер (пакер) в эти самые приложения.

$ npm i electron-packager --save-dev

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

И, собственно, пакуем:

$ npm run build

@DangelZM 1 дек 2015 в 13:01

Спасибо за дополнение, думаю об этом буду писать отдельную статью.

НЛО прилетело и опубликовало эту надпись здесь

@DangelZM 1 дек 2015 в 13:49

Спасибо, добавлю и это в следующую статью

@baka_cirno 1 дек 2015 в 15:08

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

Это и плюс, и минус. В качестве UI можно налепить что угодно, но очень сложно сделать так, чтобы это потом выглядело и работало как настольное приложение, а не как веб-страница в отдельном окне. Очень мало толковых вариантов для создания именно настольного UI. И разработчики Atom не спешат релизить те компоненты, которые они сами используют.
Кто хочет писать настольные приложения на JavaScript, советую глянуть на react native desktop. Он пока нестабильный, но активно пилится.

@kosmonaFFFt 2 дек 2015 в 04:02

ИМХО ExtJS компоненты очень похоже на десктоп выглядят. Я как то с ними баловался в десктомпном приложении (только использоват QtWebkit) — выглядело прилично.

@arusakov 1 дек 2015 в 16:58

Укажите ссылку на первоисточник, у вас же перевод официального туториала на русский язык.

@arusakov 1 дек 2015 в 17:12

И не нужно плодить сущности — вот официальный репозиторий (atom/electron-quick-start) для быстрого старта с абсолютно идентичным кодом.

@DangelZM 1 дек 2015 в 19:13

Сомневаюсь в идентичности репозиториев, diff вам в помощь. По поводу первоисточника в написании статьи я использовал 4 источника включая мысли от себя. И рад, что есть люди которым этот материал оказался полезен.

@Methos 1 дек 2015 в 18:09

file://?

Очень хорошо. Хакеры уже ждут вас и вашу файловую систему.

@Kolonist 1 дек 2015 в 18:44

Это же локальное приложение, оно и так имеет доступ к файловой системе.

@Methos 1 дек 2015 в 18:55

Подробнее здесь habrahabr.ru/company/dsec/blog/272017

@Kolonist 1 дек 2015 в 19:05

Вы не поняли. Это не виджет с изолированной областью файловой системы, это обычное десктопное приложение, разработчик которого и так имеет полный доступ к файловой системе машины, на которой запускается программа. Т.е. если не «file://», то «fs.». Это же как программа на C, C#, JavaSE, Delphi — и так есть полный доступ ко всему, это предусмотренное поведение.

@DangelZM 1 дек 2015 в 19:17

Согласен с вашим мнением.

@AMar4enko 2 дек 2015 в 01:17

Расскажите лучше, как собирать пакет с приложением, использующим нативные плагины.
Делал утилиту для просмотра точек на карте Google Maps, точки грузил из SQLite. Для SQLite расширение собирается через node-gyp, вот я, помню, попрыгал. Слава богу нужно было только под одну платформу.

@DangelZM 2 дек 2015 в 07:07

Тоже не однократно сталкивался с проблемами node-gyp. В большинстве случаев решалось без особых проблем. Если у вас есть интересный опыт решения сложных проблем которые могут возникнуть напишите статью, я буду очень признателен, как и многие.

@Demogor 10 мар 2016 в 11:44

Пардон за слоупостинг.
В Вашем случае отлично подойдет electron-rebuild, Удобен и пока что не подводил.

@IIIEB4YK 2 дек 2015 в 03:54

Если в Electron завёрнута удалённая веб-страница с X-Frame-Options: DENY, как с этим бороться? Конкретный пример с Myrrord: github.com/mikethedj4/Myrrord/issues/1

@DangelZM 2 дек 2015 в 07:11

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

@aramby 3 дек 2015 в 22:50

Доброго времени суток) есть у этого заморского чуда, возможность задать максимальные размеры окна (max-width, max-height)?

@dannyzubarev 3 дек 2015 в 23:29

Конечно :) Параметры `maxWidth` и `maxHeight` у BrowserWindow для установки максимальной ширины и высоты окна соответственно.

https://github.com/atom/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions

@aramby 4 дек 2015 в 16:00

Посоны выручайте, Electron с jQuery не хочет работать… В браузере все норм, в Electron'е devTools выдает:

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ index.html:11

@DangelZM 4 дек 2015 в 16:06

Решаю проблему так

window.$ = window.jQuery = require('../bower_components/jquery/dist/jquery.min.js');

@lastuniverse 14 дек 2015 в 01:25

скопировал исходники со статьи
командой 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 ]

@DangelZM 14 дек 2015 в 07:18

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

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

Во первых мне кажется у вас нет пробела между electron-packager и точкой которая указывает

@lastuniverse 14 дек 2015 в 14:29

пробел есть, когда вставляю сюда он пропадает

@DangelZM 14 дек 2015 в 07:31

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

У меня вызов выглядит так:

electron-packager . AppName --platform=win32 --arch=x64 --version=0.33.3 --out=./Release --overwrite --ignore=Release

@lastuniverse 14 дек 2015 в 14:35

Спасибо за подсказки. Пробовал собиать под все ОС вместе и под каждую в отдельности, и для разных архитектур, результат тот же.

@alchapone 2 июн 2016 в 08:15

Для того чтобы с каждым моделум не мудохаться, можно, к примеру, использовать Bozon. Им и стартовать приложение можно и тесты запускать и паковать.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий