создаем приложение на javascript
Как быстро создать десктопное приложение на HTML, CSS и JavaScript
Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?
В этой статье мы сосредоточимся в основном на том, как Electron можно использовать для создания десктопных приложений с использованием веб-технологий.
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 глобально, используя следующую команду:
Начнём с приложения
Используйте следующую команду для создания вашего приложения:
simple-desktop-app-electronicjs — это название приложения.
Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:
Это должно открыть окно как на скрине ниже:
Разберёмся в структуре и коде
Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.
package.json
Содержит информацию о приложении, которое вы создаете, все зависимости, необходимые для приложения, и несколько скриптов. Некоторые из скриптов уже предварительно настроены, но вы также можете добавлять новые.
Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.
src/index.js
Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.
Главный процесс и процесс отрисовки
Любое приложение может иметь только один главный процесс, но много процессов визуализации.
Также возможно взаимодействие между главным процессом и процессом отрисовки. Однако, я не буду останавливаться на этом в текущей статье.
abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.
src/index.html
Код в index.js с пояснениями
app используется для управления жизненным циклом событий приложения. Приведенный выше фрагмент кода говорит, что, когда приложение будет готово, нужно загрузить первое окно.
Точно так же app может использоваться для выполнения других действий с различными событиями. Например, его можно использовать для выполнения некоторых действий непосредственно перед закрытием приложения и так далее.
Создадим десктопное приложение конвертера температур
Давайте воспользуемся тем же приложением, которое мы создали ранее, и немного изменим его, чтобы создать приложение конвертера температуры.
Сначала давайте установим Bootstrap с помощью следующей команды:
Скопируйте следующий код в src/index.html:
Приведенный выше код выполняет следующие действия:
Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».
Функция fahrenheitToCelcius() делает ровно наоборот.
Запускаем приложение
Запустите приложение, используя следующую команду:
Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.
JavaScript: Создание простого MEVN-приложения
О чем статья
Цель этой статьи — показать, как можно создать базовое MEVN-приложение. Акроним MEVN
означает — MongoDB + Express.js + Vue.js + Node.js. В качестве примера будет написано
одностраничное приложение, которое содержит форму, состоящую из нескольких текстовых
полей. При заполнении формы и отправке данных, сервер будет записывать их в базу данных, а
клиент редиректить на страницу “Спасибо”.
В качестве операционной системы используется Ubuntu 18.10, установка всех компонентов будет
указана относительно нее.
Необходимые требования
Что имеем на выходе
Подготовка рабочего пространства
Для начала разработки приложения, необходимо установить некоторые инструменты.
Основа всего проекта — Node.js и его пакетный менеджер NPM. Node.js это — среда выполнения
JavaScript, окружение которого включает в себя все, что вам нужно для выполнения программы,
написанной на JavaScript.
Установить можно здесь. Следует выбирать версию “Stable”, как указано на
скриншоте:
Так же можно использовать NVM (Node Version Manager) — это удобный инструмент для управления версиями Node.js. Установить его из терминала можно командой:
Затем выполнить nvm use *version*, например:
Далее идет MongoDB. Это СУБД, классифицированая как NoSQL, использует JSON-подобные документы и схему базы данных.
Для установки нужно выполнить последовательность команд:
Когда MongoDB установлена, запустить ее в фоновом режиме можно так:
Vue.js — фронтенд-фреймворк для создания пользовательских интерфейсов. Vue полностью подходит для создания одностраничных приложений (SPA).
Теперь, когда имеется установленная СУБД MongoDB и Node.js + NPM, осталось определиться с текстовым редактором. У меня в качестве текстового редактора будет использоваться VS Code. Можно выбрать любой редактор на свой вкус: будь то Sublime, Atom или даже Notepad++.
Инициализация проекта
Для создания нового приложения Vue.js, воспользуемся установленной ранее Vue CLI. Команда создания выглядит, как vue create *app_name*:
В терминале появляется интерфейс, позволяющий задать настройки для нового приложения. Выбираем “Manually select features” для подробной настройки, составляем следующий перечень:
По окончании генерации приложения, должно появиться подобное сообщение:
Можно запустить приложение указанной выше командой npm run serve и посмотреть, что сгенерировал Vue CLI:
На этой стартовой странице присутствует функционал Vue Router (две ссылки в самом верху), установленные CLI плагины, а также ссылки на документацию, проекты экосистемы Vue и социальные сети.
Так выглядит сейчас иерархия созданного проекта:
Начало разработки (frontend)
Так как мы пользуемся Vue CLI, вместо разделения кода на отдельные html, css и js, создаются файлы vue. В этом нет ничего сверхъестественного: файлы vue подразумевают следующую структуру:
Это сделано для более удобного оформления компонентов Vue и является всего лишь синтаксическим сахаром. Именно файлы с таким форматом обрабатываются Babel для последующего выпуска в продакшн.
В router.js Vue импортирует пакет vue-router, который был установлен Vue CLI при создании проекта и все компоненты, которые участвую в маршрутизации. Маршрутизация происходит путем передачи, в качестве аргумента, массива объектов в класс Router, при создании его экземпляра:
Первым делом уберем заданные Vue стили по-умолчанию из App.vue. Затем следует удалить каталог components/ вместе с HelloWorld.vue, они больше не понадобятся. Помимо самого каталога и компонента, следует удалить его импорт внутри views/Home.vue, где он используется:
Теперь от приложения остались только пара ссылок и их представления. Содержимое этих страниц тоже не понадобится, но не обязательно их удалять, можно просто изменить, но сначала нужно отредактировать файл маршрутизации:
Теперь переходим к компонентам, опираясь на систему маршрутизации. Нужен новый компонент Thanks. Вместо создания нового, отредактируем About.vue и переименуем в Thanks.vue:
И изменим Home.vue: добавим форму, которая будет отправлять такие данные, как Имя, Email, Адрес и Пол:
Первое, что может ввести в заблуждение — @submit.prevent=«sendData». В Vue события прослушиваются с помощью атрибута v-on:, но так как этот атрибут при разработке используется достаточно часто, было придумано его сокращение — @. Т.е. эту строку можно представить, как v-on:submit.prevent=«sendData».
Разберем, что это вообще значит:
В экспортируемом объекте мы убираем свойство components, т.к. Home.vue не будет иметь дочерних компонентов, но добавляем метод data. В data содержится объект данных Vue. Стоит заметить, что нельзя просто записать значение data, как объект с данными — обязательно нужно записать значение, как функцию, которая его возвращает. Это особенность Vue-компонентов.
В нашем случае, данные — это значения инпутов name, email, address и gender.
Помимо data, появилось свойство methods, содержащее все методы для работы с данными. В нем записан только один метод — sendData, который упоминался выше. Он привязан к отправке формы и пока что просто выводит в консоль значения инпутов.
И последняя часть компонента — style. Сюда записаны стили, чтоб форма отображалась корректно.
Откроем теперь наше приложение. Перед нами форма, которую следует заполнить и отправить данные с помощью кнопки Send.
При отправке страница не перезагружается, и значения формы не сбрасываются. Самое время посмотреть в консоль браузера (Ctrl + Shift + I):
Если вы видите в консоли примерно то же самое, только с указанными вами значениями — поздравляю, вы написали свое первое полноценное Vue-приложение. Если нет, то стоит проверить правильность выполнения каждого шага и прийти к положительному результату.
Пока что оставим Vue-приложение, как есть и перейдем к разработке сервера на Node.js, чтоб приложению было, с чем обмениваться данными.
Продолжение разработки (backend)
Для начала следует установить необходимые npm пакеты для работы сервера:
server.js — это будет Node.js-сервер, который запускается с помощью среды Node. Вы можете попробовать Node, записав сюда простой код, например:
Затем запустите server.js с помощью команды node из корня проекта, указав путь к файлу и его имя:
Очистим файл server.js и приступим к разработке. Сначала следует импортировать все установленные ранее пакеты (express, morgan и mongoose), а также инициализировать Express-приложение:
Если ранее вы не сталкивались с const: const — один из двух операторов объявления переменной (второй let), пришедших на замену var, стандарта ES6. Его особенность в том, что значение присвоенное переменной нельзя изменить. Для переменных с изменяемыми в дальнейшем значениями рекомендуется использовать let.
require() — функция среды Node.js, реализующая возможность подключения различных модулей, как собственных, так и npm. Заметьте, мы не устанавливали пакет path, но импортируем его — он уже входит в зависимости среды.
const app = express() — инициализация приложения Express. Далее мы будем работать с переменной app, это и будет наш сервер.
Далее следует установить настройки для нашего Express-приложения, но так как оно небольшое, нужно задать всего один параметр — port. Возьмем, например, значение 3000 (или любой доступный порт). После запустим прослушивание порта, т.е. запустим сервер:
Теперь, открыв в браузере адрес localhost:3000, вы увидите сообщение “Cannot GET /”. Это значит, что наш сервер запустился и работает корректно. Позже мы сделаем так, чтоб вместо данного сообщения выводилось наше Vue.js-приложение, а пока установим соединение с базой данных MongoDB и middleware:
С помощью mongoose.connect() происходит подключение к базе данных. Заметьте, что сама MongoDB должна быть активна перед последующим подключением к ней. В этот метод передаются два параметра — адрес базы и набор настроек в виде объекта. В нашем случае это строка “mongodb://localhost:27017/mevn-course” и объект < useNewUrlParser: true >.
useNewUrlParser используется для работы с MongoDB версии 3.1.0+. Если по какой-то причине вы используете версию ниже, чем 3.1.0, не следует указывать этот параметр.
С помощью app.use() устанавливается middleware для нашего приложения. Это функции, имеющие доступ к объекту запроса (req), объекту ответа(res) и к следующей функции промежуточной обработки (next) в цикле “запрос-ответ” приложения. Мы будем использовать в качестве middleware встроенные в Express парсеры приходящих с запросами данных (в нашем случае это json и urlencoded) и установленный ранее пакет morgan с параметром ‘dev’, который обозначает логирование в режиме “разработка”. Теперь сервер может получать приходящие с запросами данные в формате json и urlencoded и логировать все приходящие запросы. Снова запустим приложение:
Теперь, если мы перейдем в браузере по адресу localhost:3000, в консоли будет происходить логирование всех запросов, в данном случае запроса GET:
Займемся разработкой модели Записи. Это нужно для того, чтоб данные в базу данных отправлялись в нужном формате (Этот формат называется Schema). Наша форма из Vue-приложения отправляет Имя, Email, Адрес и Пол — это все может быть представлено, как строка. Значит запись в базе данных должна содержать 4 поля типа “строка”. Создаем модель:
Мы импортируем пакет mongoose и присваиваем переменной Schema значение класса Schema из пакета mongoose. Запись “const < Schema >= mongoose” называется деструктуризацией в ES6 и эквивалентна “const Schema = mongoose.Schema”. Дальше создается экземпляр класса Schema, в качестве параметра которого передается объект с названиями свойств записи и их типами данных.
“module.exports = …” — это запись экспорта. Т.е. когда мы будем импортировать этот модуль, результатом импорта будет mongoose.model(‘Record’, Record).
Когда модель создана, нужно сделать файл API-маршрутизации. В качестве архитектурного стиля взаимодействия компонентов будет использоваться REST. REST API определяет набор функций, к которым разработчики могут совершать запросы и получать ответы. Взаимодействие происходит по протоколу HTTP. Методы вызова REST API — это методология CRUD (Create, Read, Update, Delete), т.е. GET, POST, PUT, DELETE. Добавим код в файл маршрутизации:
Мы импортируем пакет Express и создаем объект маршрутизатора. Также импортируем модуль модели Record, для взаимодействия с базой данных. Далее просто описывается маршрутизация. Конструкция async/await — это относительно новый способ написания асинхронного кода. Раньше подобный код писали, пользуясь callback-функциями и обещаниями. Благодаря async/await, асинхронный код становится похожим на синхронный, да и в его поведении появляются черты такого кода, весьма полезные в некоторых ситуациях, в которых обещаниями пользоваться было, по разным причинам, неудобно.
Модель и маршрутизация написаны, осталось только импортировать нужный модуль в server.js:
Эта запись означает, что написанная нами маршрутизация будет начинаться с /api/records. Т.е, чтоб добавить новую запись нужно отправить POST-запрос с телом, содержащим валидные данные (имя, email, адрес и пол) по адресу localhost:3000/api/records.
Убедимся в работе сервера — запустим его и протестируем API. Я использую для этого Postman. Это полноценный инструмент для тестирования API.
GET-запрос по адресу localhost:3000/api/records сейчас возвращает пустой массив:
В таком случае выполним POST-запрос по этому же адресу, в теле которого укажем валидные данные для записи в базу:
Видим, что ответ от сервера пришел в формате JSON, как мы и указывали, это сообщение
<“state”: “success”>. Выполняем предыдущий GET-запрос снова:
Все вышло, вы можете самостоятельно протестировать оставшиеся операции над данными (UPDATE, DELETE или GET one).
Разработка backend-части подошла к концу, осталось внести последний штрих — обозначить статические файлы для отображения по адресу localhost:3000/. Добавим код:
Продолжение разработки (frontend)
Десктопные приложения на JavaScript. Часть 1
Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.
Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js.
По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.
Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.
WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)
Быстрый старт
Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.
После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения. Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder. Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm, с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:
Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию —save-dev, для глобальной -g. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:
Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):
В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64.
Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.
Hello, world!
Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.
Для данного приложения, нам даже не понадобится JavaScript, только HTML. Создадим папку с названием HelloWorld. Поместим внутрь файл index.html со следующей разметкой:
Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:
Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).
Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):
Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true. Проделав это при запуске приложения мы получим следующее окно:
После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:
Работа с нативными контролами
NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:
Общий шаблон для использования контролов:
Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:
Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:
Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:
Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).
Для доступа к созданным элементам можно использовать свойство items:
Обратите внимание, что нельзя напрямую создавать элементы:
Самое главное при работе с нативными контролами, это помнить, что любая ошибка при работе с ними может привести к краху всего приложения, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола, можно выполнить следующее:
Для более удобной работы с контролами, они унаследованы от EventEmitter, поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:
Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.
Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world:
После запуска приложения, мы можем увидеть созданное контекстное меню для body. Таким образом, мы можем определить контекстное меню для любого элемента.
Итак, теперь кроссплатформенные приложения может создавать каждый, но за все нужно платить. В данном случае мы жертвуем как скоростью, так и занимаемым объемом памяти (собранное приложение получается достаточно большим, более 50 Мб). Список приложений, созданных, используя данную технологию можно найти на github.
Во второй части статьи мы рассмотрим технологию более подробно.
Полное руководство по созданию классических приложений на JavaScript
Еще недавно разработка классических приложений считалась сложной задачей — для этого приходилось учить специальный язык программирования, например Java или C++. К счастью, сейчас веб-разработчики могут создавать прекрасные классические приложения, конвертируя код JavaScript в полноценные программы. Давайте разберемся, что для этого нужно.
Прежде чем перейти к основному материалу, ознакомьтесь с моим последним руководством по созданию классических приложений здесь. Это расширенная версия этой статьи, описывающая пять проектов и способы монетизации.
Сегодня мы рассмотрим следующие вопросы.
Инструменты для создания классических приложений.
Создание классического приложения для чтения блога Medium.
1. Инструменты для создания классических приложений
Веб-разработчикам, которые намерены создавать классические приложения, сначала стоит ознакомиться с основными инструментами в их арсенале и сосредоточиться на самых полезных решениях с учетом поставленных задач. Рассмотрим три лучших фреймворка JavaScript для создания классических приложений, которые дадут вам общее представление о доступных инструментах.
Electron
Это самый популярный и эффективный инструмент — возьмем его на вооружение. Он служит нам верой и правдой уже не один год и завоевал уважение многих компаний, например Slack, Atom, Discord, Intuit и др.
Он был создан на GitHub и благодаря качественному коду заслужил отличную репутацию. Очевидно, что этот фреймворк будет развиваться и активно использоваться в будущем.
В его основе лежит движок Chrome, а это значит, что ваши приложения будут быстро работать на любых компьютерах.
Это прекрасное решение для веб-разработчиков, которые хотят заняться созданием классических приложений, поскольку в нем используются JavaScript, HTML и CSS.
Это еще один отличный инструмент, правда, менее популярный. С его помощью классические приложения можно разрабатывать на Node.js. Раньше этот движок назывался node-webkit, так как в нем используется та же технология, что и в браузерах Chrome и Safari.
Proton Native
Proton Native прекрасно подойдет тем, кто знаком с React и React Native. В нем используется фреймворк React, а значит, вы можете пользоваться любыми библиотеками React.js.
При решении некоторых задач он демонстрирует даже большую эффективность, чем Electron, поскольку в нем используется собственный движок, который обеспечивает производительность на уровне нативных приложений.
Он подойдет программистам, знакомым с React, которые хотят получить больше контроля в ущерб скорости разработки.
Теперь вы знакомы с основными инструментами разработки классических приложений, которые пригодятся веб-разработчику. Давайте начнем с Electron — это оптимальное решение для новичков, подходящее для выполнения большинства задач.
2. Настройка проекта с Electron.js
У этого фреймворка есть огромное преимущество: написав код один раз, вы можете сразу же развертывать его на устройствах Windows, Mac и Linux.
Для начала загрузите Node.js — он позволит исполнять код JavaScript вне браузера. Скачать можно отсюда: https://nodejs.org/en/
Откройте его в текстовом редакторе. Я использую Atom.io. Измените объект scripts так, как показано ниже. Больше ничего менять не нужно.
Примечание. Не удаляйте другие данные, просто обновите объект scripts. Он нам понадобится позже для запуска классического приложения. Вот как должен выглядеть ваш файл package.json.
package.json
Теперь нужно установить electron — это утилита командной строки, которую мы используем для управления проектом в качестве dev-зависимости.
Затем создайте файл index.js в корневой папке проекта. Этот файл будет использоваться для запуска нашего приложения. Добавьте в файл index.js этот код, чтобы вывести на экран стартовое окно.
index.js
App используется для установки приложения, над которым мы работаем, а BrowserWindow — для вывода стартового окна.
Теперь в корневой папке проекта нужно создать файл index.html с таким кодом (размещать его в подпапках нельзя):
index.html
Это простой файл на HTML5, назначение которого, вероятно, вам не совсем понятно. Обратите внимание на теги title и body — в них будет размещаться содержимое. Заголовок страницы — My Electron App, и в теге body есть точно такой же заголовок.
В верхней части страницы вы видите содержимое тега title, а на самой странице — заголовок.
Теперь приступим к разработке самобытного приложения для чтения блогов.
3. Создание классического приложения для чтения блога Medium
Сегодня мы создадим приложение для чтения блогов, которое показывает список определенных статей на Medium и позволяет читать их, не переходя на сайт.
В приложении можно просматривать только нужный вам контент, не отвлекаясь на дополнительные материалы сайта. В нем будут собраны все самые интересные статьи — и ничего лишнего.
Вот как оно будет выглядеть:
Хотите создать такое же? Тогда читайте дальше!
Разработка приложения не займет много времени. Мы сделаем это в три этапа.
Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице.
Получение данных с сайта Medium через RSS-канал и их обработка.
Разработка дизайна и функционала приложения.
1. Создание таблицы стилей и базового HTML, подключение таблицы стилей к веб-странице
Создайте новый файл style.css в корневой папке. Именно в нем мы будем писать весь CSS-код. Не забывайте, что мы пишем классическое приложение на языках, предназначенных для веб-разработки.
Импортируйте таблицу стилей в файл index.html следующим образом:
В HTML-файле измените содержимое тега body :
index.html
2. Получение данных с сайта Medium через RSS-канал и их обработка
HTML-файл настроен, и теперь мы можем получать данные с сайта Medium и отображать недавно добавленные статьи в нашем приложении. Для этого будем использовать RSS-каналы — это тот же самый блог, только конвертированный в формат JSON или XML, удобный для обработки в таких приложениях, как наше.
Теперь нужно объявить функцию getMediumArticles в файле inside.js со следующим содержимым:
inside.js
Теперь напишем HTML для отображения полученных данных в виде структурированного блока:
inside.js
Я пробовал разные решения, вариант с iframe оказался самым эффективным — его можно быстро открывать и закрывать.
Каждый блок представляет собой элемент div с заголовком и содержимым. Содержимое включает имя автора и описание статьи — вступление и изображение.
Закрываем последний div и html :
Теперь вставляем сгенерированный HTML-код на нашу страницу:
Вот как это сделать:
Функция findElement выбирает все интерактивные элементы в каждом блоке со статьей, ищет активную ссылку и загружает в iframe нужные данные.
Например, когда вы нажмете на изображение, в iframe откроется соответствующая статья целиком.
Возможно, вот эта часть в самом начале выглядит не очень понятно:
Но она всего лишь означает: «Проверь, отрендерился ли основной заголовок (main-title), если нет, попробуй снова выполнить эту функцию». Рендеринг полученных данных займет всего несколько секунд, и мы сможем получить доступ к статьям.
Обратите внимание на эту часть:
Окончательный сценарий inside.js
3. Разработка дизайна и функционала приложения
Наше приложение должно быть приятным в использовании, поэтому займемся дизайном. Вы можете оформить приложение по-своему или воспользоваться моим файлом style.css :
4. Развертывание приложения
Осталось только развернуть приложение, чтобы получить исполняемый файл, который можно запустить на компьютере Windows или Mac и опубликовать для скачивания другими пользователями.
Для этого установим пакет:
Это позволит осуществлять доступ к нужному нам инструменту electron-packager откуда угодно.
Теперь перейдите в папку проекта и запустите команду:
После выполнения этой команды приложение будет готово к использованию. Я работаю на Mac, поэтому создал папку medium-reader-darwin-x64 с несколькими файлами:
— LICENSE- LICENSES.chromium.html- medium-reader.app- version
Вот и все! Теперь вы знаете, как использовать веб-технологии для создания классических приложений с помощью Electron в рекордные сроки. Если вы хотите узнать больше, прочитайте полное руководство и рассмотрите пять дополнительных проектов, которые помогут вам создать портфолио, освоить новые навыки и выполнять более сложные заказы по разработке классических и веб-приложений: https://merunas.io/desktop-app-mastery.html
Вы научитесь создавать современные классические приложения, которые будут генерировать прибыль для вас и вашего бизнеса.
Всех желающих приглашаем на открытый урок «Создание интерактивных страниц, работа с анимациями». Урок посвящен анимациям в вебе. Рассмотрим способы создания интерактивных страниц, научимся анимировать переходы состояний HTML элементов, а также создавать анимации как на CSS, так и на JavaScript.