Как быст­ро со­здать де­ск­топ­ное при­ло­же­ние на HTML, CSS и JavaScript

Что мы сделали

  • Установили и настроили редактор кода.
  • Создали рабочую папку и добавили туда файлы нашего проекта.
  • Научились редактировать и сохранять файлы с кодом.
  • Установили расширение, чтобы сразу видеть результат вёрстки.
  • В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

    Не знаете, какой код написать?

    Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

    Регистрация

    Нажатие на кнопку — согласие на обработку персональных данных


    Почему браузера может быть мало?

    Похожие подходы и их недостатки

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

    • Adobe flash
    • Tide SDK (ex. Titanium Desktop)
    • App.js
    • Brackets Shell
    • Tint
    • И другие…

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

    С nw.js все намного проще. Если вы разрабатываете веб-приложения и имеете немного опыта работы с node.js, то уже через несколько часов вы поймете как писать и собирать десктопные приложения под mac, windows и linux.

    От node-webkit к nw.js. Немного истории

    В 2011 году разработчик из Китая Roger Wang основал проект node-webkit, основной задумкой которого стало использование веб-технологий для написания полнофункциональных кроссплатформенных десктопных приложений. Как уже понятно из названия, основными составляющими проекта стали Node.js и Webkit (Chromium).

    Шли годы и в апреле 2013-го Chromium, а вместе с ним и проект node-webkit переехал на новый движок Blink (форк Webkit-а). В добавок к этому с января 2020 проект начал использовать io.js вместо node.js.

    В итоге изначальное название “node-webkit” стало совсем не актуальным и было принято решение переименовать проект в nw.js. Бытует мнение, что теперь в буквах NW заложен новый смысл – “Native Web”.

    Основными спонсорами проекта до сих пор являются intel и Gnor Tech.

    Основная идея. Зачем “скрещивать” Chromium c node.js?

    Когда мы говорим о десктопных приложениях, мы представляем себе некий графический интерфейс, взаимодействуя с которым мы осуществляем изменения на системном уровне операционной системы (например, копируем файлы, запускаем процессы, выполняем системные команды и т.п.)

    Для того, чтобы понять всю мощь идеи nw.js, давайте коротко рассмотрим основные составляющие nwjs.

    Chromium – браузер с открытым исходным кодом, который разрабатывается силами Google, Opera Software, Яндекс, NVIDIA и других компаний. В качестве движка для отображения веб-страниц в Chromium используется Blink (форк Webkit). В качестве движка для обработки JavaScript используется v8.

    node.js(io.js) – это JavaScript runtime на основе движка v8, изначально используемого в Chromium. Он написан на С++ и работает на уровне протоколов прикладного уровня, где ему доступны множество различных API операционных систем, таких как файловая система и сетевые взаимодействия. В силу этого, node чаще всего используется для построения системных приложений и серверов.

    Код в index.js с пояснениями

    Большая часть кода, созданного в index.js, содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js:

    mainWindow = new BrowserWindow({ width: 800, height: 600,});// и загрузи index.html из app.mainWindow.loadURL(`file://${__dirname}/index.html`);

    Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow. Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

    app.on(‘ready’, createWindow);

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

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

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

    Сначала давайте установим Bootstrap с помощью следующей команды:

    npm install bootstrap —save

    Скопируйте следующий код в src/index.html:

    Конвертер температур

    По Цельсию:

    По Фаренгейту:

    Приведенный выше код выполняет следующие действия:

  • Создаёт поле ввода текста с id=»celcius». Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit().
  • Создаёт поле ввода текста с id=»fahrenheit». Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius().
  • Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
  • Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.
  • 2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js.

    Создайте файл с именем renderer.js внутри src. Скопируйте в него следующий код:

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

    Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

    Функция fahrenheitToCelcius() делает ровно наоборот.

    Запустите приложение, используя следующую команду:

    npm start

    Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.

    Команда для упаковки приложения:

    npm run package

    Выполнение этой команды потребует некоторого времени. Как только выполнение закончится, проверьте папку out в папке проекта.

    Я проверил это на машине c Windows. Была создана папка с именем simple-desktop-app-Electronjs-win32-x64 внутри папки out.

    Таким образом, в папке out/simple-desktop-app-Electronjs-win32-x64 команда создала файл .exe для этого приложения. Нажатие на исполняемый файл автоматически запускает десктопное приложение.

    При создании приложения на macOS, папка внутри out называется simple-desktop-app-Electronjs-darwin-x64 и создаётся файл .app, который работает точно так же, прим. переводчика.

    Имя папки simple-desktop-app-electronicjs-win32-x64 может быть разделено на имя-платформа-архетиктура, где

    • имя — simple-desktop-app-electronjs
    • платформа — win32 (darwin на macOS)
    • архетиктура — x64

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

    Допустим, мы хотим пакет для другой платформы и архитектуры. Тогда вы можете использовать следующий синтаксис:

    npm run package — —platform=<�������������������

    ��ример, чтобы упаковать приложение для Linux, вы можете использовать следующую команду:

    npm run package — —platform
    =linux —arch=x64
    Это создаст папку с именем simple-desktop-app-electronicjs-linux-x64 внутри папки out.

    Чтобы создать файл make или установщик для приложения, используйте следующую команду:

    npm run make

    Потребуется некоторое время на выполнение этой команды. Как только процесс закончится, проверьте папку out в папке проекта.

    В папке out/make будет создан установщик Windows для десктопного приложения (или ZIP-архив на macOS).

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

    Код для этого приложения доступен в моем репозитории GitHub:

    package.json

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

    Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

    Также в package.json есть «main»: «src/index.js», который указывает, что src/index.js является входной точкой приложения.

    Разберёмся в структуре и коде#

    Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

    package.json#

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

    Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

    Также в package.json есть «main»: «src/index.js», который указывает, что src/index.js является входной точкой приложения.

    src/index.js#

    Согласно package.json, index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js.

    Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

    Главный процесс и процесс отрисовки#

    Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow. Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

    Любое приложение может иметь только один главный процесс, но много процессов визуализации.

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

    Архитектура Electron, показывающая главный процесс и процессы отрисовки. Названия файлов могут быть другими.

    abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

    src/index.html#

    index.js загружает файл index.html в новый экземпляр BrowserWindow.

    Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html. Страница index.html запускается в своем собственном процессе отрисовки.

    Код в index.js с пояснениями#

    Большая часть кода, созданного в index.js, содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js:

    mainWindow = new BrowserWindow({ width: 800, height: 600, }); // и загрузи index.html из app. mainWindow.loadURL(`file://${__dirname}/index.html`);

    Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow. Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

    app.on(‘ready’, createWindow);

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

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

    Сборка приложений на nw.js

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

    В стандартных же случаях лучше использовать готовый плагин node-webkit-builder.

    Все что нужно сделать, это установить node-webkit-builder и запустить команду nwbuild с указанием пути к папке приложения.

    $ npm i -g node-webkit-builder $ nwbuild ./

    Если требуется собрать приложение под конкретные операционные системы, их список можно задать с помощью флага -p

    $ nwbuild ./ -p win32,win64,osx32,osx64,linux32,linux64

    При этом nwbuild сам скачает последние версии nw.js и сделает сборки для всех указанных платформ (каждую в отдельной папке).

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

    Mac OS

  • Создаёт поле ввода текста с id=»fahrenheit». Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius().
  • Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
  • Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.
  • 2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js.

    Создайте файл с именем renderer.js внутри src. Скопируйте в него следующий код:

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

    Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

    Функция fahrenheitToCelcius() делает ровно наоборот.

    Способ 3: Адресная строка

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

  • Достаточно начать набрать, например, «C:/», чтобы попасть в корневую папку системного диска. При этом браузер автоматически подставит к адресу «file:///» — стирать это не нужно, вручную прописывать тоже не обязательно.
  • Понравилась статья? Поделиться с друзьями:
    автомобильные новости
    Добавить комментарий