Рубрики
Без рубрики

Как легко построить настольные приложения с HTML, CSS и JavaScript

Можно ли использовать HTML, CSS и JavaScript для создания настольных приложений? Ответ да. В этой статье мы будем сосредоточиться в основном на том, как электрон можно использовать для создания настольных приложений с веб-технологиями, такими как HTML, CSS и JavaScript. Электронный электрон может быть использован для создания настольных приложений

Автор оригинала: Aditya Sridhar.

Можно ли использовать HTML, CSS и JavaScript для создания настольных приложений?

Ответ да.

В этой статье мы будем сосредоточиться в основном на том, как электрон можно использовать для создания настольных приложений с веб-технологиями, такими как HTML, CSS и JavaScript.

Электрон

Электрон Может использоваться для создания приложений настольных компьютеров с HTML, CSS и JavaScript. Также эти приложения работают для нескольких платформ, таких как Windows, Mac, Mac, Linux и так далее.

Электрон сочетает в себе хромиум и NODEJS в одно время выполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в качестве настольного приложения.

Электронный кузнец

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

Электронная кузница делает вышеупомянутые вещи намного проще.

Он обеспечивает шаблонные приложения с угловыми, реактивными, Vue и другими каркасами, которые предотвращают дополнительные ручные настройки.

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

До реквизиты

Убедитесь, что у вас установлены Nodejs. Это может быть установлено из здесь Отказ

Установите электронную кухню глобально, используя следующую команду:

npm install -g electron-forge

Давайте начнем с приложениями

Используйте следующую команду для создания вашего приложения:

electron-forge init simple-desktop-app-electronjs

Simple-Desktop-App-Electronjs это название приложения.

Вышеуказанная команда займет некоторое время для запуска.

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

cd simple-desktop-app-electronjsnpm start

Это должно открыть окно, как показано ниже:

Понимание существующей структуры и кода папки

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

Package.json.

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

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

Также Package.json имеет «Главная»: «SRC/index.js» что указывает на то, что SRC/index.js – начальная точка приложения

SRC/index.js.

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

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

Каждая веб-страница создана запускается в процессе, называемом Процесс рендерера.

Процесс главного процесса и рендерера

Цель Главный процесс это создавать веб-страницы, используя BrowserWindow Пример.

Браузервин Экземпляр использует Процесс рендерера Для запуска каждой веб-страницы.

Каждое приложение может иметь только один основной процесс, но может иметь много процессов рендерера.

Можно общаться между основным и процессом рендерера. Это, однако, не будет покрыто в этой статье.

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

SRC/index.html.

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

Что это в основном означает, что index.js создает новое окно GUI и загружает его с помощью веб-страницы index.html. Веб-страница index.html работает в собственном процессе рендерера.

Код в index.js объяснил

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

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

Вышеуказанный кодовый фрагмент в основном создает BrowserWindow Экземпляр и нагрузки index.html в браузервин.

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

app.on('ready', createWindow);

приложение используется для управления жизненным циклом события приложения.

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

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

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

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

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

npm install bootstrap --save

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




  
    
    Temperature Converter
    

  
  
    
Temperature Converter

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

  1. Создает текстовое поле с ID Celcius Отказ Всякий раз, когда все будет набрано в этом текстовом поле, CelciustofaRenheit () Функция называется.
  2. Создает текстовое поле с ID Фаренгейт Отказ Всякий раз, когда все будет набрано в этом текстовом поле, FahrenheittoCelcius () Функция называется.
  3. Всякий раз, когда в текстовом поле Цельсия набирается новое значение, значение в текстовом поле Фаренгейта отображает ту же температуру в Фаренгейте
  4. Всякий раз, когда в текстовом поле «Фаренгейт» набирается новое значение, значение в текстовом поле Celcius отображает ту же температуру в Celcius

2 функции, которые присутствуют на преобразовании температуры в renderer.js.

Создайте файл под названием renderer.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;
}

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

FahrenheittoCelcius () Функция делает точную противоположность этого.

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

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

npm start

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

Упаковка приложения

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

npm run package

Эта команда займет некоторое время для запуска. Как только это заканчивает проверку OUT папка в папке проекта.

Я проверил это в Windows Machine. Это создает папку под названием Simple-Desktop-App-ElectronJS-Win32-X64 внутри OUT папка

Так в OUT/SICE-DESTTOP-APP-ELENTERJS-WIN32-X64 Папка, команда создает .exe Файл для этого приложения. Нажатие на файл EXE автоматически запускает приложение для рабочего стола.

Название папки Simple-Desktop-App-ElectronJS-Win32-X64 можно разбить как appname-платформа-архитектура куда

  • appname-desktop-app-electronjs
  • Платформа
  • архитектура

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

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

npm run package -- --platform= arch=

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

npm run package -- --platform=linux --arch=x64

Это создаст папку под названием Simple-Desktop-App-ElectronJS-Linux-X64 внутри OUT папка.

Создание файла сделать

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

npm run make

Эта команда займет некоторое время для запуска. Как только это заканчивает проверку OUT папка в папке проекта.

OUT/MAY Папка будет иметь установщик Windows для настольного приложения.

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

Код

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

https://github.com/aditya-sridhar/simple-desktop-app-electronjs

Поздравляю ?

Теперь вы знаете, как создать настольные приложения, используя HTML, CSS и JavaScript.

Эта статья охватывала очень базовые концепции электрона и электрона.

Чтобы узнать больше о них, вы можете проверить их документацию.

Об авторе

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

Не стесняйтесь связаться со мной на моей учетной записи LinkedIn https://www.linkedin.com/in/aditya1811/

Вы также можете следовать за мной в Twitter https://twitter.com/adityasridhar18

Мой сайт: https://adityasridhar.com/

Читать дальше моих статей в моем блоге на adityasridhar.com Отказ

Оригинал: “https://www.freecodecamp.org/news/how-to-easily-build-desktop-apps-with-html-css-and-javascript-d3e3f03f95a5/”

Читайте ещё по теме: