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

Пройдите тест, узнайте какой профессии подходите

Содержание

Вконтакте

Одноклассники

Скопировать ссылку

Узнайте, как создать простое кросс-платформенное приложение на Electron, используя веб-технологии HTML, CSS и JavaScript!

Алексей Кодов

Автор статьи

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

Установка и настройка окружения

Для начала убедитесь, что на вашем компьютере установлены Node.js и npm (пакетный менеджер для Node.js). Если их нет, установите их с официального сайта Node.js.

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

mkdir my-electron-app
cd my-electron-app

Теперь инициализируйте новый проект Node.js с помощью команды:

npm init

Заполните информацию о проекте и продолжайте.

Установка Electron

Установите Electron как зависимость для вашего проекта с помощью команды:

npm install electron --save-dev

После установки добавьте следующую строку в файл package.json в разделе "scripts":

«start»: «electron .»

Это позволит запускать ваше приложение с помощью команды npm start.

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

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

const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () =&gt; {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () =&gt; {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Этот код создает окно приложения и загружает в него файл index.html.

Создание пользовательского интерфейса

Создайте файл index.html в корне вашего проекта и добавьте следующий код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Простое приложение на Electron</title>
  </head>
  <body>
    <h1>Добро пожаловать в простое приложение на Electron! 😃</h1>
    <p>Это пример простого приложения, созданного с помощью Electron.</p>
  </body>
</html>

Теперь у вас есть основной пользовательский интерфейс для вашего приложения.

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

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

npm start

После этого откроется окно приложения с интерфейсом, который вы создали.

Заключение

Теперь вы знаете, как создать простое приложение на Electron с нуля. Это лишь начало вашего пути в мир создания кросс-платформенных приложений с использованием веб-технологий. Удачи вам в изучении и разработке!