Думаю, люди, которые пишут сайты, хотя бы один раз хотели сделать приложение без изучения 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 и другими фреймворками, что позволяет избежать дополнительных танцев с бубном.
ВЕБ-ИНТЕРФЕЙС ЗА 15 МИНУТ | Как сделать графический интерфейс для программы на Python / JS
Также он обеспечивает простоту сборки и упаковки приложения. В нём есть множество других функций, которые можно найти в документации .
Я не буду загружать вас терминами, сразу к разработке!
Предварительная подготовка
Убедитесь, что у вас установлен Node.js . Если нет, то его можно скачать отсюда . Установите Electron Forge глобально, используя следующую команду:
npm install -g electron-forge
Предупреждение. Команды надо писать в командной строке(оболочке)
Начнём с приложения
Используйте следующую команду для создания вашего приложения:
electron-forge init app
app — это название приложения.
Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:
Это должно открыть окно как на скрине ниже:
Разберёмся в структуре и коде
Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.
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.
Создание Андроид приложения на HTML5, CSS3 и JavaScript
Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки .
Главный процесс и процесс отрисовки
Основное предназначение главного процесса — создание страниц с помощью экземпляра 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(
height: 600,
// и загрузи index.html из app.
mainWindow.loadURL(`file://$/index.html`);
Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow. Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:
app.on(‘ready’, createWindow);
app используется для управления жизненным циклом событий приложения. Приведенный выше фрагмент кода говорит, что, когда приложение будет готово, нужно загрузить первое окно.
Точно так же app может использоваться для выполнения других действий с различными событиями. Например, его можно использовать для выполнения некоторых действий непосредственно перед закрытием приложения и так далее.
Давайте попробуем сделать приложение
У меня есть редактор кода , и о нём уже был пост, так я решил перенести его в приложение, и сделать другой дизайн с новыми функциями.
Поэтому изменим код в src/index.html на наш:
Заметьте. что в коде есть подключение файлов, которые Вы можете найти в моём репозитории https://github.com/htmlcssphpjs/codeEditor .
Запускаем приложение
Запустите приложение, используя следующую команду:
Должно открыться следующее окно. Попробуйте покодить.
Источник: dzen.ru
Введение в создание десктопных HTML5-приложений при помощи Node-Webkit
При помощи Node.js мы можем легко создавать веб-приложения. Теперь благодаря библиотеке node-webkit мы также можем создавать с помощью Node.js десктопные приложения, используя уникальную комбинацию HTML5 и Node.
Введение
В этой библиотеке движок WebKit и Node.js сочетаются уникальным образом. WebKit и Node используют один и тот же контекст (* среда исполнения программы. Здесь и далее прим. пер.), благодаря чему вы можете писать код таким образом, как если бы его предполагалось исполнять в браузере, но с возможностью использовать весь функционал Node.
Список вариантов использования неограничен. Вы можете создавать бизнес-приложения, текстовые и графические редакторы, игры, презентации, панели управления для администраторов и т. д. Просто назовите имя десктопного приложения, которое вы бы хотели создать, и я вам гарантирую, что его можно будет создать при помощи node-webkit.
В данном руководстве я покажу вам, как начать использовать библиотеку на примере создания простого текстового редактора.
Подготовка
Для начала вам необходимо получить библиотеку. Скачайте подходящую для вашей операционной системы версию (само же приложение будет запускаться на всех платформах) с github и распакуйте ее, где захотите. Теперь давайте создадим базовую структуру папок. У нас будут папки для файлов HTML ( .html ) и для файлов JavaScript ( .js ). Также создайте файл package.json в той же папке, в которой расположен исполняемый файл nw , и папку node_modules для размещения модулей, которые мы создадим.
Package.json
Первым делом необходимо заполнить необходимые поля в фале package.json. В случае использования node-webkit это name и main (на Github вы можете ознакомиться со всем списком доступных опций для package.json ). Первое поле то же самое, что и для простых приложений Node.js. Во втором поле должен быть указан путь (относительный или абсолютный) к главному файлу HTML, который будет показан при запуске приложения. В нашем случае файл package.json должен выглядеть следующим образом:
«name»: «simple-text-editor»,
Источник: code.tutsplus.com
Урок 1. Как создать простую страницу на html?
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится
1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)
2) для Mac и Linux
Bluefish Editor ( скачать )
2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.
Приступим к созданию страницы HTML
1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.
2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html
Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!
Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:
Смотрим настройки файлов и папок:
Для Win XP Открываем любую папку — Сервис (сверху в панели) — Свойства папки — Вид — Скрывать расширения для зарегистрированных файлов (снять галочку) — Применить
Для Win 7 Открываем любую папку — Упорядочить — Параметры файлов и поиска -Вид — Скрывать расширения для зарегистрированных типов файлов (снять галочку) — Применить
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html — Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
Название страницы
 |
Все отступы слева перед тегами в примерах Необязательны. Они сделаны для наглядности, чтобы Вы видели пары тегов |
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Название страницы
Любой заголовок
Просто текст
Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом
Другой текст
Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).
Название страницы
В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Хочу выделить текст жирным, а этот уже курсивом после слова жирным —>