Думаю, люди, которые пишут сайты, хотя бы один раз хотели сделать приложение без изучения python и java, используя привычный html. Так вот это не сложно! В этом помогу я и он:
Electron
Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.
Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.
Electron Forge
Если Electron используется напрямую, то перед сборкой приложения потребуется определённая ручная настройка. Также, если вы хотите использовать Angular, React, Vue или любой другой фреймворк или библиотеку, вам нужна будет ручная настройка.
Electron Forge значительно упрощает все вышеперечисленное.
Он предоставляет шаблонные приложения с Angular, React, Vue и другими фреймворками, что позволяет избежать дополнительных танцев с бубном.
Также он обеспечивает простоту сборки и упаковки приложения. В нём есть множество других функций, которые можно найти в документации.
Я не буду загружать вас терминами, сразу к разработке!
Предварительная подготовка
Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:
npm install -g electron-forge
Предупреждение!!! Команды надо писать в командной строке(оболочке)
Начнём с приложения
Используйте следующую команду для создания вашего приложения:
electron-forge init app
app— это название приложения.
Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:
cd app
npm i
npm start
Это должно открыть окно как на скрине ниже:
Разберёмся в структуре и коде
Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.
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 использует процесс отрисовки для запуска каждой страницы.
Любое приложение может иметь только один главный процесс, но много процессов визуализации.
Также возможно взаимодействие между главным процессом и процессом отрисовки. Однако, я не буду останавливаться на этом в текущей статье.
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 может использоваться для выполнения других действий с различными событиями. Например, его можно использовать для выполнения некоторых действий непосредственно перед закрытием приложения и так далее.
Давайте попробуем сделать приложение
У меня есть редактор кода, и о нём уже был пост, так я решил перенести его в приложение, и сделать другой дизайн с новыми функциями!!!
Поэтому изменим код в src/index.html на наш:
Заметьте!!! что в коде есть подключение файлов, которые Вы можете найти в моём репозитории https://github.com/htmlcssphpjs/codeEditor!!!
Запускаем приложение
Запустите приложение, используя следующую команду:
npm start
Должно открыться следующее окно. Попробуйте покодить.
Но это ещё не приложение, давайте попробуем собрать!
Упаковываем приложение
Команда для упаковки приложения:
npm run package
Выполнение этой команды потребует некоторого времени. Как только выполнение закончится, проверьте папку out в папке проекта.
Создание файла make
Чтобы создать файл make или установщик для приложения, используйте следующую команду:
npm run make
Потребуется некоторое время на выполнение этой команды. Как только процесс закончится, проверьте папку out в папке проекта.
В папке out/make будет создан установщик Windows для десктопного приложения (или ZIP-архив на macOS).
Когда вы запускаете эту команду без каких-либо параметров, по умолчанию она создает установщик для платформы, которую вы используете для разработки.
Редактор на github
Не пропускайте посты, знайте о них заранее!!!
Не знаете какую выбрать OS и интересуетесь программированием? Тогда вам на канал Sacred Wolf, на нём вы почитаете про JS, и узнаете про интересные свойства OS'ей, а также многое другое!
