[JavaScript, HTML, Node.JS] Написание графического приложения на Electron JS (начало: Создание окна)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию(а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.
Официальная документация гласит:
Если Вы можете сделать сайт, то Вы сможете сделать настольное приложение. Electron это фреймворк для создания нативных приложений с веб-технологиями, такими как: JavaScript, HTML и CSS. Он заботится о трудных частях, так что Вы можете сосредоточиться на главных элементах Вашего приложения.
Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.
Да, сперва вам было-бы не плохо ознакомиться с тем, как создаются сайты. Я не буду заострять внимание на деталях кода на HTML и CSS.
Так-же рекомендую ознакомиться со списком приложений, написанных на Electron JS. Среди них такие известные вам программы как: Skype, Visual Studio Code, Slack и многие другие.
Теперь можем приступить к созданию самого приложения.
И начать я предлагаю с организации среды разработки. Я буду использовать Visual Studio Code.
Создадим папку для проекта, пропишем в терминале команду
npm init
и следуем инструкциям (я оставил все поля пустыми, они заполняются автоматически).
Если не работает команда npm или ранее вы не использовали Node.JS
SPL
Если ранее вы никогда не использовали Node.JS и при выполнении команды npm init вы получаете ошибку, то вам нужно установить Node.JS на свой компьютер. Для этого перейдите на официальны сайт Node.JS и установите его. По понятным причинам рекомендую устанавливать LTS версию. Установка на MacOS и на Windows происходит как установка самой обыкновенной программы, никаких сложностей возникнуть не должно"
И в нашей папке появляется файл:
package.json
SPL
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
В нем нужно добавить строчку:
"start": "electron ."
Что бы получилось вот так:
package.json
SPL
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC"
}
Это нужно для того, что бы запускать нашу программу по одной команде. Рассмотрим это позже. Сейчас нам нужно установить непосредственно Electron JS. Для начала установим Electron глобально:
npm install -g electron
И после этого установим его локально
npm install electron -save
После установки библиотеки в папке появится еще один файл — package-lock.json и папка — node_modules. С ними нам ничего делать не нужно. А нужно нам создать файл, который будет непосредственно запускать программу. В файле package.json есть строчка:
"main": "index.js"
Она говорит нам о том, что вся программа будет запускаться из файла "index.js". Давайте создадим этот файл:
const path = require('path');
const url = require('url');
const {app, BrowserWindow} = require('electron');
let win;
function createWindow() {
win = new BrowserWindow({
width: 700,
height: 500,
});
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
В данной статье я не буду рассказывать о том, что означает каждая строчка программы выше, отмечу лишь пару моментов:
- Параметры "width" и "height" отвечают за размер окна которое мы создаем. в моем случае это 700 в ширину и 500 в высоту.
- pathname: path.join(__dirname, 'index.html') говорит нам о том, что программа "index.js" вызывает файл, находящийся в той же директории с названием "index.html"
- Поскольку мы работаем с простым веб-обозревателем Chromium строка win.webContents.openDevTools(); вызывает известный всем разработчикам Chrome DevTools.
Со всем остальным вы можете ознакомиться в официальной документации (или же в моих будущих статьях о чем будет cказанно в конце).
Теперь давайте создадим файл index.html и в тег <body> запишем, конечно-же, Hello world:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
И наконец мы можем запустить только-что написанное приложение. Для этого нам нужно прописать в терминал команду:
npm start
Как вы помните, мы добавили команду start в файл package.json. Запускаем. Ждем. Видим запущенное приложение:
Вот и все, мы с вами создали графическое приложение. Пока, правда, оно не очень функционально и полезно, но если вы имеете опыт в Web разработке или готовы изучать новые технологии, то вам будет не сложно сделать из этого приложения нечто большее.
P.S. Это моя первая статья, и во время ее написания я даже не уверен, что она пройдет песочницу, но если вас заинтересовала тема написание графического приложения с помощью библиотеки Electron, то в будущих статьях я подробнее расскажу о "фишках" Electron`а, о его плюсах и минусах (очевидных и не очень) и о том, как можно написать и собрать для разных платформ рабочее и полезное приложение с помощью данной библиотеки.
Критика приветствуется.
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, JavaScript, Программирование] Пример практического использования модулей
- [Высокая производительность, Разработка веб-сайтов, JavaScript, Клиентская оптимизация, ReactJS] Производительность приложений, работающих с Video и Audio
- [Разработка веб-сайтов, JavaScript, VueJS] Автоматическое обновление скриптов после деплоя
- [Мессенджеры, JavaScript, Программирование, VueJS] Как создать приложение-чат за двадцать минут (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование] Как анимировать элемент «details» с помощью WAAPI (перевод)
- [JavaScript, Node.JS] Engine-version — npm пакет, который позволит задать корректное окружение разработки
- [Поисковые технологии, PHP, MySQL, JavaScript, Функциональное программирование] Pick — самая маленькая поисковая система на PHP и MySQL
- [Разработка веб-сайтов, JavaScript, ReactJS] Представляем Quarkly – инструмент для react-разработчиков и дизайнеров, который поможет оптимизировать вашу разработку
- [Разработка веб-сайтов, JavaScript, Программирование, VueJS] Vue 3 на Typescript
- [Разработка веб-сайтов, JavaScript, HTML] Рендеринг на клиенте, на сервере и генерация статических сайтов
Теги для поиска: #_javascript, #_html, #_node.js, #_javascript, #_node.js, #_electron_js, #_html, #_javascript, #_html, #_node.js
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:26
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию(а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.  Официальная документация гласит: Если Вы можете сделать сайт, то Вы сможете сделать настольное приложение. Electron это фреймворк для создания нативных приложений с веб-технологиями, такими как: JavaScript, HTML и CSS. Он заботится о трудных частях, так что Вы можете сосредоточиться на главных элементах Вашего приложения.
Да, сперва вам было-бы не плохо ознакомиться с тем, как создаются сайты. Я не буду заострять внимание на деталях кода на HTML и CSS. Так-же рекомендую ознакомиться со списком приложений, написанных на Electron JS. Среди них такие известные вам программы как: Skype, Visual Studio Code, Slack и многие другие. Теперь можем приступить к созданию самого приложения. И начать я предлагаю с организации среды разработки. Я буду использовать Visual Studio Code. Создадим папку для проекта, пропишем в терминале команду npm init
и следуем инструкциям (я оставил все поля пустыми, они заполняются автоматически). Если не работает команда npm или ранее вы не использовали Node.JSSPLЕсли ранее вы никогда не использовали Node.JS и при выполнении команды npm init вы получаете ошибку, то вам нужно установить Node.JS на свой компьютер. Для этого перейдите на официальны сайт Node.JS и установите его. По понятным причинам рекомендую устанавливать LTS версию. Установка на MacOS и на Windows происходит как установка самой обыкновенной программы, никаких сложностей возникнуть не должно"
И в нашей папке появляется файл: package.jsonSPL{
"name": "app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC" } В нем нужно добавить строчку: "start": "electron ."
Что бы получилось вот так: package.jsonSPL{
"name": "app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "electron ." }, "author": "", "license": "ISC" } Это нужно для того, что бы запускать нашу программу по одной команде. Рассмотрим это позже. Сейчас нам нужно установить непосредственно Electron JS. Для начала установим Electron глобально: npm install -g electron
И после этого установим его локально npm install electron -save
После установки библиотеки в папке появится еще один файл — package-lock.json и папка — node_modules. С ними нам ничего делать не нужно. А нужно нам создать файл, который будет непосредственно запускать программу. В файле package.json есть строчка: "main": "index.js"
Она говорит нам о том, что вся программа будет запускаться из файла "index.js". Давайте создадим этот файл: const path = require('path');
const url = require('url'); const {app, BrowserWindow} = require('electron'); let win; function createWindow() { win = new BrowserWindow({ width: 700, height: 500, }); win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })); win.webContents.openDevTools(); win.on('closed', () => { win = null; }); } app.on('ready', createWindow); app.on('window-all-closed', () => { app.quit(); }); В данной статье я не буду рассказывать о том, что означает каждая строчка программы выше, отмечу лишь пару моментов:
Со всем остальным вы можете ознакомиться в официальной документации (или же в моих будущих статьях о чем будет cказанно в конце). Теперь давайте создадим файл index.html и в тег <body> запишем, конечно-же, Hello world: <!DOCTYPE html>
<html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World!</h1> </body> </html> И наконец мы можем запустить только-что написанное приложение. Для этого нам нужно прописать в терминал команду: npm start
Как вы помните, мы добавили команду start в файл package.json. Запускаем. Ждем. Видим запущенное приложение:  Вот и все, мы с вами создали графическое приложение. Пока, правда, оно не очень функционально и полезно, но если вы имеете опыт в Web разработке или готовы изучать новые технологии, то вам будет не сложно сделать из этого приложения нечто большее. P.S. Это моя первая статья, и во время ее написания я даже не уверен, что она пройдет песочницу, но если вас заинтересовала тема написание графического приложения с помощью библиотеки Electron, то в будущих статьях я подробнее расскажу о "фишках" Electron`а, о его плюсах и минусах (очевидных и не очень) и о том, как можно написать и собрать для разных платформ рабочее и полезное приложение с помощью данной библиотеки. Критика приветствуется. =========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:26
Часовой пояс: UTC + 5