Создание ПК программы на JavaScript. Библиотека Electron JS

Создание ПК программы на JavaScript. Библиотека Electron JS

Приложения в вебе становятся всё мощнее, здесь прогресс на лицо. Тем не менее значительную долю разработки занимают стандартные приложения, которые имеют полный доступ к физическому оборудованию ПК. Уже сегодня есть возможность объединить обе технологии и написать десктопное приложение на известных языках веб-программирования, вроде HTML, JS и Node.js. Это всё можно поместить в исполняемый файл, который можно использовать на Mac OS X, Windows, Linux.


Сейчас есть 2 популярнейших проекта с opensource-кодом, которые могут создавать исполняемые файлы из веб-приложений. Речь идёт о NW JS и Electron. В рамках данного материала поговорим о последнем.

Начало работы с Electron

Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.

Запуск приложения

Как уже удалось определить, приложение на Electron – это обычная Node.js программа, поэтому ей нужно добавить npm. Благо, это выполняется предельно легко.

Следует запустить терминал и находясь в каталоге целевого проекта выполнить команду:

npm install

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

npm start

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


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

Разработка программы

Разработка программы это создание главного JS файла, а также HTML и CSS файлов содержащих все стили и разметку для страниц программы.


Предлагаем вам просмотреть небольшое видео, в котором наглядно приведено описание и создание полноценного приложение на Electron JS.



Ссылки из видео:

  1. Установить Node JS;
  2. Официальный сайт Electron JS;
  3. Скачать редактор Atom;
  4. Онлайн программа "Front-end разработчик".


Ниже приведен весь код из видео урока.


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,
		icon: __dirname + "/img/icon.png"
	});

	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();
});


HTML код:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>itProger App</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
	<h1>Конвертер температуры</h1>
	<div >
		<label for="usr">Цельсии:</label>
		<input type="text"  id="celcius" onkeyup="celciusToFahrenheit()">
	</div>

	<div >
		<label for="pwd">Фаренгейты:</label>
		<input type="text"  id="fahrenheit" onkeyup="fahrenheitToCelcius()">
	</div>

	<script>
		require('./render.js');

		function celciusToFahrenheit(){
			let celcius = document.getElementById('celcius').value;
			let fahrenheit = (celcius* 9/5) + 32;
			document.getElementById('fahrenheit').value = fahrenheit;
		}

		function fahrenheitToCelcius(){
			let fahrenheit = document.getElementById('fahrenheit').value;
			let celcius = (fahrenheit - 32) * 5/9
			document.getElementById('celcius').value = celcius;
		}
	</script>
</body>
</html>

Упаковка и дистрибуция

Существует ещё один важный момент, который помогает достичь целевого пользователя. Вам нужно запереть всё содержимое в исполняемый файл, как раз его и можно включить двойным кликом. Важно создать уникальный дистрибутив под каждую ОС: Windows, OS X, Linux. Как раз в этом и пригодится Electron Packager.


Здесь следует уделить внимание тому, что в готовый файл также добавятся ваши ресурсы, это обусловлено платформой Node JS, и обрезанная копия webkit веб-обозревателя. На выходе должен получиться файл весом около 50 Мб. Это весьма большой вес для обычного приложения в несколько строк. Вопрос с весом программы теряет актуальность при разработке крупных приложений со сложными алгоритмами работы.

Заключение

Главное из значимых отличий от NW JS сводится к тому, что в NW.js входной файл – HTML, в то время как в Electron – JavaScript-файл. Таким образом Electron дарит больше возможностей по контролю. На его основе можно создать приложение с несколькими окнами, и настроить перенос данных между ними.

()
Количество показов: 357
23 марта 2019

Возврат к списку

Войти Регистрация
Корзина0 позиций на сумму 0 руб.