Как сделать из сайта приложение для windows
Обновлено: 06.07.2024
Можно ли использовать 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 — это название приложения.
Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:
Это должно открыть окно как на скрине ниже:
Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.
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 с пояснениями
Большая часть кода, созданного в 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).
Когда вы запускаете эту команду без каких-либо параметров, по умолчанию она создает установщик для платформы, которую вы используете для разработки.
Веб-приложения чрезвычайно полезны, но иногда вы можете захотеть превратить определенный веб-сайт в настольное приложение. Таким образом, вы можете запустить определенный веб-сайт, не открывая в браузере новую вкладку, что может быть весьма полезным. Вот как это сделать в Windows 10:
Как запустить веб-сайт в качестве настольного приложения в Windows 10?
Решение 1. Используйте опцию Добавить на рабочий стол .
Большинство современных браузеров позволяют запускать ваши любимые веб-сайты в качестве настольных приложений. Для этого перейдите на нужный веб-сайт и выберите параметр Добавить на рабочий стол . Чтобы сделать это в Google Chrome, выполните следующие действия.
После этого вы можете закрепить ярлык на панели задач или переместить его в любое место на вашем ПК.
Решение 2. Создание ярлыка Chrome
По словам пользователей, вы можете запустить веб-сайт как настольное приложение, создав новый ярлык Chrome. Для этого выполните следующие простые шаги:
Это решение предлагает те же результаты, что и предыдущий, но имеет несколько дополнительных шагов и не требует от вас посещения веб-сайта или открытия Chrome вообще. Это решение идеально подходит для опытных пользователей, которые хотят быстро запускать свои любимые веб-сайты в качестве настольных приложений. Если вы начинающий пользователь, вы можете пропустить это решение.
Решение 3. Используйте страницу приложений Chrome
По словам пользователей, вы можете легко запустить любой веб-сайт в качестве настольного приложения, используя страницу приложений Chrome. Этот процесс относительно прост, и вы можете сделать это, выполнив следующие действия:
После этого вы можете запустить выбранный веб-сайт в качестве приложения на рабочем столе.
У Microsoft есть собственный сервис, который позволяет с легкостью конвертировать любой веб-сайт в универсальное приложение. Сделайте следующее:
Решение 5. Используйте Nativefier
Следует отметить, что Nativefier позволяет создавать кроссплатформенные приложения, поэтому вы можете запускать их в Windows, macOS и Linux. Этот инструмент может легко конвертировать любой веб-сайт в файл .exe, что делает его невероятно полезным. Однако для этого приложения требуется Node.js, поэтому оно может не подойти для простых пользователей. Если вы разработчик и знакомы с Node.js, обязательно попробуйте Nativefier.
Запуск веб-сайта в качестве настольного приложения относительно прост, и вы можете легко конвертировать любой веб-сайт с помощью Applicationize. Для этого выполните следующие действия:
- Перейдите на веб-сайт Applicationize .
- Введите адрес сайта, который вы хотите конвертировать.
- Необязательно: Настройте дополнительные параметры, такие как значок приложения, заголовок приложения, пользовательский цвет рамки и возможность открывать ссылки в виде всплывающих окон.
- После этого нажмите кнопку Создать и загрузитьРасширение Chrome .
- Теперь вам нужно открыть Chrome и перейти на вкладку chrome: // extensions .
- Откройте Проводник и найдите загруженный файл. Перетащите файл на вкладку chrome: // extensions в Chrome.
После этого расширение будет установлено, и вы сможете получить к нему доступ, перейдя на страницу chrome: // apps . Оттуда вы можете создать ярлык на рабочем столе, выполнив Шаги 4 и 5 из Solution 3 .
Как видите, запуск веб-сайтов в качестве настольных приложений относительно прост. Если вы используете Google Chrome, вы можете легко конвертировать любой веб-сайт в настольное приложение. Если вы хотите сохранить сайт в виде файла .exe, мы рекомендуем вам попробовать сервис WebDGap.
Если вы регулярно посещаете одни и те же сайты в интернете, рекомендую превратить их в собственные приложения Windows 10. Это позволит использовать любимые сайты, как если бы они были обычными приложениями, что идеально подходит для маленьких экранов.
Что бы самому сделать приложение из любого сайта лучше использовать Google Chrome или Microsoft Edge, и теперь смотрите ниже, как это сделать.
Как скрыть или показать все значки на рабочем столе в Windows
Как сделать так, чтобы Chrome всегда открывал нужные вам вкладки
Чуть чуть теории.
Могу вас заверить, что веб-сайт выглядит и работает в созданном вами приложении точно так же, как и в веб-браузере. Единственное отличие, которое вы увидите - в окне приложения не будет никаких элементов браузера, таких как панель закладок, адресная строка и прочих инструментов.
Если вы используете Chrome, приложение веб-сайта будет использовать Chrome в фоновом режиме. Если по умолчанию используется Edge, приложение браузера будет использовать Microsoft Edge. Тем не менее, обычные элементы браузера тут тоже удалены, поэтому вы получаете реальное приложение.
Эти веб-приложения имеют собственные отдельные окна, значки на панели задач и ярлыки на рабочем столе.
Вы можете использовать главное меню Chrome, чтобы превратить любой веб-сайт в приложение для Windows.
Чтобы начать создание своего приложения, запустите Chrome, откройте любой веб-сайт, который вы хотите превратить в приложение. Перейдите на конкретную веб-страницу, с которой вы хотите, чтобы ваше приложение запускалось.
Появится окошко с запросом нового имени приложения. Введите имя нового приложения, установите флажок «Открыть в отдельном окне» и нажмите «Создать».
Chrome создаст приложение для вашего сайта и добавит его в меню «Пуск». Теперь вы можете найти и запустить сделанное приложение с помощью меню «Пуск» вашего ПК.
Microsoft Edge также позволяет превратить веб-сайт в приложение, в точно такое же приложение, что и в Chrome. В конце концов, Microsoft Edge и Chrome основаны на одном и том же открытом базовом коде Chromium. Чтобы создать приложение в браузере «Microsoft Edge» откройте его.
Перейдите на веб-сайт, для которого вы хотите создать приложение, а затем перейдите на конкретную страницу, которую вы хотите использовать для приложения.
Введите имя нового приложения и нажмите «Установить».
Теперь вы можете запустить новое созданное приложение из меню «Пуск».
Способ создать ярлык для приложений на рабочем столеПриложения вашего веб-сайта будут иметь собственные ярлыки в списке «Все приложения» в меню «Пуск».
А чтобы получить к ним быстрый доступ, лучше всего создать для своих приложений, ярлык на рабочем столе вашего ПК.
Если вы использовали Chrome для создания приложений из любимых сайтов, ярлыки на вашем рабочем столе уже автоматически созданы. Но в случае с Microsoft Edge, придётся вручную добавить ярлыки на рабочий стол.
Для этого откройте меню «Пуск» и найдите новое созданное приложение. Щелкните приложение правой кнопкой мыши и выберите «Прикрепить на начальном экране».
Это необходимо сделать, потому что Windows не позволяет напрямую создавать ярлыки для таких приложений из браузера Edge.
Снова откройте меню «Пуск», и вы увидите свое приложение справа. Перетащите его на рабочий стол, и для него будет создан ярлык.
По какой-то странной причине у вас может быть только одно приложение в разделе «Последние приложения» в меню «Пуск».
Это усложняет работу, если вы создали целый стек этих приложений и хотели бы получить к ним легкий доступ.
Поэтому, если вы не добавляли их к плиткам меню «Пуск» и потеряли их, вы можете найти все созданные вами веб-приложения в следующем месте в проводнике Windows:
Как создать ярлык на панели задач для ваших приложенийМожно легко создать ярлык на панели задач для приложений своего веб-сайта.
Для этого откройте меню «Пуск», найдите свое приложение, щелкните его правой кнопкой мыши и выберите «Закрепить на панели задач».
По умолчанию Windows использует фавиконку веб-сайта в качестве значка для приложения. Вы можете изменить этот значок, если хотите немного настроить созданное самостоятельно приложение.
Можно использовать картинку значка со своего компьютера или одну из встроенных в Windows 10.
Чтобы изменить значок приложения, щелкните правой кнопкой мыши ярлык приложения на рабочем столе и выберите «Свойства».
В поле «Свойства» нажмите «Ярлык» вверху, а затем нажмите «Сменить значок».
В открывшемся окне нажмите «Обзор» и выберите значок, который вы хотите использовать для своего приложения.
Вы увидите список встроенных значков Windows 10. Выберите тот, который хотите использовать, и нажмите «ОК».
Чтобы сохранить настройки, нажмите «Применить», а затем выберите «ОК».
Как и в случае с другими приложениями, вы можете запросто удалить созданное приложение, если больше не хотите его использовать. Это не повлияет на вашу учетную запись на веб-сайте, и вы по-прежнему сможете использовать это сайт из любого веб-браузера.
Чтобы начать удаление приложения, сначала запустите приложение на своем ПК.
Щелкните три точки в строке заголовка вверху окна и выберите «Удалить».
Нажмите «Удалить» в приглашении, чтобы удалить приложение.
Это позволяет вам захватывать те фотографии или видео, которые вы сохранили на своем ПК, и публиковать их в Instagram, не открывая приложение на iPhone или Android.
Короткое видео как сделать настоящий пост в Instagram со своего компьютера
С выходом Windows 8, разработчикам был представлен абсолютно новый тип приложений – приложения в стиле Modern UI. Ну, как новый? Подобные приложения уже разрабатывались для Windows Phone. Данные приложения не имели ничего общего с привычными Windows-приложениями. Такие приложения не совместимы с предыдущими версиями Windows, обладают абсолютно новым интерфейсом (Modern) и для их разработки используется новый WinRT API (Windows Runtime API) и Windows XAML (язык разметки интерфейса).
Несведущему человеку может показаться, что никаких проблем это приносить не должно, хотя на деле каждая версия приложения должна быть написана с нуля полностью. Именно это является главной проблемой, так как объем работы, который требовалось выполнить, был колоссальным. Нет, конечно были способы для унификации некоторых частей приложения, но они трудны для начинающего разработчика.
В Microsoft знали об этой проблеме и долгое время работали над ее решением. Результатом этой работы стали так называемые универсальные приложения Windows (Universal Windows Apps), которые доступны начиная с Windows 8.1 Update 1 и Windows Phone 8.1 (которая до конца лета будет доступна для установки всем устройствам на Windows Phone 8). Можно предположить, что теперь приложения будут работать без перекомпиляции как на Windows, так и на Windows Phone, но это не совсем так.
Каждое приложение все так же будет создаваться и компилироваться отдельно для каждой платформы, но объем требуемой работы теперь существенно сократился. Все дело в том, что Microsoft наконец-то унифицировали большую часть API для Windows и Windows Phone. Больше всего изменений было выполнено именно на стороне Windows Phone. Отныне для написания приложений для этих двух платформ (скоро будет три, Xbox One туда же) используется WinRT API и Windows XAML. Конечно же привычный для Windows Phone Silverlight никуда не делся и даже обзавелся некоторыми дополнительными возможностями, но не о нем сейчас разговор.
Универсальные приложения теперь используют среду выполнения Windows (тот самый Windows Runtime). Эти нововведения позволяют программисту свести платформозависимый код к минимуму, ведь большинство вызовов к API идентичны.
• Visual Studio Express 2013 для Windows с обновлением 2
Это совсем минимально. С таким комплектом вы сможете разработать универсальное приложение и отлаживать его Windows-версию на своем текущем компьютере. Windows Phone-версию приложения вы сможете отлаживать только на реальном устройстве (причем требуется аккаунт разработчика).
Чтобы иметь возможность отлаживать свое приложение в эмуляторе Windows Phone, вам потребуется:
• Windows 8.1 Профессиональная (x64)
• Процессор с поддержкой аппаратной виртуализации для клиента Hyper-V (подходит даже бюджетный Celeron G1610 и вроде даже Pentium 4 на LGA775)
• Visual Studio Express 2013 для Windows с обновлением 2
С таким комплектом вы сможете разрабатывать свое приложение более полноценно и тестировать его в различных режимах с использованием имитатора Windows-планшета и эмулятора Windows Phone.
Я же буду использовать Visual Studio Ultimate 2013 и показывать все буду именно на ней. Не волнуйтесь, от бесплатной Express интерфейс практически не отличается. Начнем!
Запустим Visual Studio и создадим новый проект.
В разделе «Приложения Магазина Windows» есть различные шаблоны приложений как для Windows, так и для Windows Phone. Нас интересуют именно универсальные приложения, шаблоны которых доступны в специальном подразделе.
На выбор дается два варианта: пустое приложение и приложение с Hub (это такой классный элемент управления). Остановимся на пустом приложении, ведь мы пока только учимся, и сразу лезть в дебри не следует. Пойдем от простого.
Введите имя для создаваемого приложения. Я назвал его «UniversalHelloWorld», четко и ясно. Нажимаем «ОК» и ожидаем, пока Visual Studio создает проект. Давайте рассмотрим структуру созданного проекта.
Весь проект подразделен на три части:
• Windows - содержит код и элементы, доступные только Windows-версии приложения
• Windows Phone - содержит код и элементы, доступные только Windows Phone-версии приложения
• Shared – содержит код и элементы, которые доступны сразу для двух платформ
Обратите внимание, что на данный момент общим являются только один элемент: App.xaml ( и App.xaml.cs). Этот элемент отвечает за запуск и остановку приложения.
Вы уже можете попробовать запустить приложение. И для этого нажмите F5. Для прекращения отладки, вернитесь в Visual Studio и нажмите «Shift+F5». Вы должны увидеть пустой экран. Первоначально будет запущена Windows-версия приложения. Чтобы выбрать, какую версию приложения запустить, найдите на панели инструментов кнопку отладки (зеленый треугольник).
Здесь вы можете выбрать, где запускать отладку вашего приложения. Имитатор выполняет имитацию Windows-планшета, у которого вы можете менять ориентацию, разрешение дисплея и прочие вещи. Кнопка «Удаленный компьютер» предназначена для запуска отладки на внешнем Windows 8 устройстве. Я для этих целей использую Surface RT.
Вернемся к смене запускаемой версии. В подменю «Запускаемый проект» вы можете выбрать «Windows Phone 8.1». После этого содержимое базового меню изменится и на ваш выбор будет доступно множество эмуляторов.
Выберите желаемый эмулятор и запустите отладку. После того, как эмулятор запустится, вы увидите пустой экран своего приложения. После завершения отладки эмулятор закрывать совсем не требуется.
Пока каждая версия приложения имеет отдельную главную страницу MainPage.xaml. Так как наше приложения очень простое, нам совсем не требуется разный дизайн страницы на каждой платформе. Перенесите MainPage.xaml в раздел Shared, и затем удалите его из разделов Windows и Windows Phone. Структура проекта станет такой:
Открыв данный файл, вы увидите эту страну в визуальном редакторе, а также ее код разметки. Пока мы имеем следующий код:
Он всего лишь создает корневую сетку страницы, закрашенную стандартным цветом страницы. Давайте добавим на страницу одноименную надпись и кнопку для приветствия. Разместите в Grid элемент TextBlock. Код элемента будет таков:
Чтобы посмотреть, как страница выглядит в режиме планшета/десктопа и телефона, используйте выпадающий список над редактором кода.
Мы его еще наполним содержимым. В этом обработчике мы создадим экземпляр диалогового окна и вызовем его. Для начала добавьте следующую директиву using вверху страницы:
Готово! Теперь можно запустить приложение на каждой из платформ и с радостью обнаружить, что все работает как надо.
На этом статья подходит к концу. Сегодня я постарался рассказать, как сделать наипростейшее универсальное приложение, которое может работать как на Windows 8.1, так и на Windows Phone 8.1. При написании этой статьи я ориентировался на новичков, поэтому пытался расписать все более-менее понятно для обычного человека, близкого к компьютерной технике (и программированию, конечно).
Я думаю, что это не последняя статья, и, возможно, получится даже небольшая серия статей. В следующей статье мы напишем уже не простой «ХеллоВорлд», а более интересное приложение, которое будет работать с некоторыми данными и будет иметь более сложный интерфейс.
Читайте также: