Как создать приложение в html

Обновлено: 07.01.2025

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

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

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

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

Electron Forge значительно упрощает все вышеперечисленное.

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

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

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

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

Где simple-desktop-app-electronicjs — это название приложения.

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

Это должно открыть окно как на скрине ниже:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выполнение этой команды потребует некоторого времени. Как только выполнение закончится, проверьте папку 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

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

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

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

Это создаст папку с именем simple-desktop-app-electronicjs-linux-x64 внутри папки out .

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

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

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

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

Код для этого приложения доступен в моем репозитории GitHub. См. форк репозитория на русском: solarrust/simple-desktop-app-electronjs — прим. переводчика.

Теперь вы знаете, как создавать десктопные приложения с использованием HTML, CSS и JavaScript. В этой статье были рассмотрены основные понятия об Electron и Electron Forge. Почитайте документацию чтобы узнать больше.

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

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

В наше время при помощи JavaScript и HTML можно сделать практически всё. А благодаря Node-WebKit (недавно переименован в NW.js) можно делать даже десктопные приложения, которые выглядят, как нативные и имеют доступ ко всем частям ОС. Сегодня мы покажем, как создать простое десктопное приложение при помощи Node-WebKit, используя jQuery и несколько модулей для Node.js.

Node-WebKit — комбинация Node.js и встроенного браузера WebKit. Код JavaScript выполняется в особом окружении, из которого есть доступ и к стандартному API браузеров, и к Node.js.

Устанавливаем Node-WebKit

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

Скачайте файлы, подходящие для вашей системы, и распакуйте их в подходящее место. Запускать их нужно так:

Первое приложение

Мы подготовили для вас тестовое приложение для примера. Оно скачивает последние статьи с Tutorialzine и делает из них карусельку при помощи jQuery Flipster.

структура каталогов

В архиве содержатся вышеуказанные файлы. Выглядят они как статический сайт, но работать в браузере при запуске index.html не будут – им нужны модули Node.js. Для запуска воспользуйтесь командой

Она и запустит наше превосходное приложение.

Как это сделано

Всё начинается с файла package.json, который node-webkit ищет при запуске. Там описано, что нужно загружать и даны разные настройки окна.

package.json

В свойстве window описана необходимость открыть окно размера 800 х 500 пикселей и спрятать у него тулбар. В него загрузится файл из свойства main. У нас это

index.html

И наконец, наш файлик с JavaScript. Вот где самое интересное.

В браузере нельзя получить доступ к информации на другом домене через jQuery. Но node-webkit убирает эти ограничения.

Использованные модули:

– модуль node webkit для работы с десктопом – встроенный в Node.js модуль. Умеет возвращать объём свободной системной памяти – преобразует байты в человеко-читаемые строки 1337 → 1.34 kB.

Также есть jQuery и плагин jQuery-flipster. И всё!

Пакуем и распространяем

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

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

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

Electron Forge значительно упрощает все вышеперечисленное.

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

simple-desktop-app-electronicjs — это название приложения.

Это должно открыть окно как на скрине ниже:

package.json

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

src/index.js

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

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

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

src/index.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это создаст папку с именем simple-desktop-app-electronicjs-linux-x64 внутри папки out .

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

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

Думаю, люди, которые пишут сайты, хотя бы один раз хотели сделать приложение без изучения python и java, используя привычный html. Так вот это не сложно! В этом помогу я и он:

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

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

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

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

Я не буду загружать вас терминами, сразу к разработке!

Предварительная подготовка

Убедитесь, что у вас установлен Node.js . Если нет, то его можно скачать отсюда . Установите Electron Forge глобально, используя следующую команду:

Предупреждение. Команды надо писать в командной строке(оболочке)

Начнём с приложения

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

app — это название приложения.

Это должно открыть окно как на скрине ниже:

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

package.json

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

src/index.js

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

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

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

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

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

Введение

Многие возможности и стандарты стали частью HTML 5. После того как вы определите какие функции доступны в сегодняшних браузерах,вы можете использовать эти возможности в вашем приложении. В этой статье вы узнаете как определить эти возможности и использовать современные Веб-технологии путем разработки приложения на примере. Большинство кода в этой статье только HTML, JavaScript, и CSS— это ядро технологии любого Веб-разработчика.

Начало

Вы можете скачать исходный код используемый в этой статье.

Примеры включают подключение очень маленького back-end компонента написаного на Java™. JDK 1.6.0_17 и использующего Apache Tomcat 6.0.14. Смотрите ссылки в конце статьи для того чтобы скачать эти приложения.

Определение возможностей

Однако позитивным моментом является то, что несколько возможностей превратились в Веб-стандарты, что дает нам шанс использовать эти возможности уже сейчас. Вы можете: расширять возможности при испольщовании старых технологий, предоставлять базовые возможности,проверить на поддержка продвинутых технологий , и затем уже расширить приложение используя расширенные возможности которые оно сможет использовать. Рассмотрим наконец, как можно определить эти возможности. Листинг 1 показывает простой скрипт определения возможностей браузера:

Листинг 1. Скрипт определения

Огромное число возможностей и стандартов слилось в стандарте HTML 5. Эта статья фокусируется только на некоторых из них. Скрипт в Листинге 1 определяет четыре возможности:

Вебворкеры (многопоточность)
Геолокация
Хранилище базы данных
Нативное воспроизведение видео

Все популярные браузеры для настольных компьютеров поддерживают возможности в большей или меньшей степени:

Firefox поддерживает всё исключая базы данных. Для видео поддерживается только Ogg.
Safari поддерживает все кроме geolocation.
Chrome поддерживает все кроме geolocation, так же непонятно какой кодек он поддерживает H.264 илиOgg. Возможно это ошибка которая наблюдается только в этой сборке Chrome или его работе с кодом. Chrome как известно поддерживает H.264.

Geolocation не поддерживает широко браузерами используемыми на настольных компьютерах, однако хорошо поддерживается в мобильных браузерах. Листинг 4 показывает список собранных данных для мобильных браузеров.
Листинг 4. Мобильные браузеры

Выше показаны данные для одного из последних симуляторов iPhone и двух вариантов для Android. Android 1.6 не поддерживает ничего из того что мы тестировали. По факту все это имеет место быть в нем, кроме воспроизведения видео, так как он использует Google Gears. Они эквивалентны API (через функцию), но не соблюдают Веб-стандарты которые мы используем для получения результата в Листинге 4. Сравните с Android 2.1, в нем все поддерживается правильно.

Обратите внимание, что iPhone поддерживает все кроме Web workers. Листинг 3 показывает, что настольная версия Safari поддерживает Web workers, так что есть резон не исключать вероятность появления в скором будущем такой возможности и на iPhone.

Теперь вы научились определять возможности пользовательского браузера, давайте изучим простое приложение которое использует несколько этих возможностей в комбинации—в зависимости от того что может пользовательский браузер. Вы создадите приложение используя Foursquare API для поиска нескольких популярных мест местоположения пользователя.

Создай приложение сегодня

Структурированное хранилище

Для сохранения данных о ТЦ в базу данных сначало созхдадим таблицу, в которой мы хотим сохранить данные. Для этого используется довольно стандартный синтаксис SQL для создания таблицы. (Все браузеры поддерживающие базы данных используют SQLite. Используйте документацию SQLite для изучения поддерживаемых, ограничиваемых и т.п. типах данных.) SQL выполняется асинхронно. Вызывается функция передачи данных и получаем данные. Функция callback получает переданный объект который мы можем использовать для выполнения SQL. Функция executeSQL принимает строку SQL, затем опциональные параметры, полюс правильность выполнения или функцию обработки ошибки. Если обработчика ошибок нет, то и ошибок нет. Для create table это хорошо. При первом запуске сценария таблица будет создана. В последующие запуски скрипт не сможет создать таблицу, так как таблица уже существует— но это правильно. вам это требуется просто для того, чтобы убедится что таблица создана, до того как будете делать вставку данных в нее.

После создания таблицы используем функцию forEach для вызова функции saveVenue с возвратом каждого торгового центра из Foursquare. Эта функция сначало делает запрос в БД чтобы убедится что такие данные уже не хранятся локально. Здесь вы видите исполнение обработчика. Результат полученный в запросе передается в обработчик. Если результатов нет, или ТЦ еще не был сохранен локально то вызывается функция insertVenue котора вставляет данные в БД.

В saveAll , после завершения всех сохранений/вставок вы можете вызвать countVenues . Это запрос общего числа строккоторые были вставлены в таблицу ТЦ. Запрос ( row["COUNT(*)"] ) вытаскивает нам количество строк в БД .

Фоновые процессы с использованием Web workers

По умолчанию поиск торговых центров возвращает 10 ТЦ. Вы можете себе представить сколько вызовов совершается чтобы получить детальные данные о каждом из них? Но Web workers делают задачу легкой и незаметной для пользователя, делая свою работу в фоновом режиме.

В этой статье освещено несколько новых возможностей HTML 5 поддерживаемых современными браузерами. Вы научились определять какие возможности поддерживаются браузерами и как прогрессивно наращивать мощь своего Веб-приложения, используя эти возможности. Большинство функционала уже широко поддерживается даже на мобильных браузерах. теперь вы можете начать исопльзовать такие в высшей степени примечательные вещи как geolocation и Web workers для создания новых, креативных Веб-приложений!

Читайте также: