Создание приложения при помощи Node js для Mac OS

Хотел бы показать как достаточно просто создавать Desktop приложения node js на базе библиотеки Electron.

Electron по своей сути это движок браузера — chromium, при помощи которого можно создавать приложения на основе веб сайта или веб сервис, достаточно всего лишь указать url сайта который должен открываться внутри хромиума и собрать приложение под нужную систему.

Тут я продемонстрирую как это сделать для mac os на процессоре arm, но в любой другой системе алгоритм создания приложения будет таким же.

Для демонстрации создания приложения, я выбрал видео сервис Youtube, который будет работать как десктоп приложение mac os. Приложение будет инсталироваться стандартным образом ( через dmg установщик ) особенностью данного приложения будет то что youtube будет запускаться через защищенный канал shadowsock, который можно настроить по инструкции тут

Для начала необходимо установить требуемые пакеты для начала разработки

brew install node
brew install npm
mkdir youtube-sock
cd youtube-sock
npm init -y
npm install electron
npm install -g electron-packager
npm install electron --save-dev
npm install dotenv
npm install electron-installer-dmg -g

После того как node js и electron установлены можно приступить к разработке кода приложения

vim index.js

И вот сам код прилаги

require('dotenv').config(); // Загружаем .env
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');

// Получаем прокси из .env или используем значение по умолчанию
const proxyUrl = process.env.PROXY_URL || 'socks5://127.0.0.1:1080';

// Применяем настройки прокси
app.commandLine.appendSwitch('proxy-server', proxyUrl);

function createWindow() {

  // создаем окно, тут можно задать параметры, например отмеить devtools и задать полноэкранный режим при запуске, задать иконку приложения
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    icon: path.join(__dirname, 'icon.icns'),
    webPreferences: {
      devTools: false
    }
  });

  // Задаем URL который должен подгружатся в наш Chromium
  win.loadURL('https://youtube.com');

  // Запрет на переход на сторонние ресурсы
  win.webContents.on('will-navigate', (event, url) => {
    if (!url.includes('youtube.com')) {
      event.preventDefault();
      win.loadURL('https://youtube.com');
    }
  });

  // Запрет на открытие других ресурсов кроме youtube.com
  win.webContents.setWindowOpenHandler(({ url }) => {
    if (!url.includes('youtube.com')) {
      return { action: 'deny' };
    }
    return { action: 'allow' };
  });

  // убираем системное стандартное меню
  Menu.setApplicationMenu(null);
}

// Запускаем приложение
app.whenReady().then(createWindow);

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

Теперь нужно собрать пакет установки для нужной системы

Для начала нужно добавить иконку приложения, для этого можно взять картинку ( будущую иконку приложения ) в формате png и конвертировать ее в специальный формат для приложений mac os — incs ( для других систем это будет другой формат иконок, например ico )

Конвертировать картинку из png в incs можно встроенной командой mac os

sips -s format icns icon.png --out icon.icns

Картинка готова! Далее нужно не забыть создать .env файл с одной единственной настройкой — вашим proxy ( sock )

echo 'PROXY_URL=socks5://127.0.0.1:1080' > .env

вместо socks5://127.0.0.1:1080 укажите свой proxy

Проверяем запуск

npx electron .

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

electron-packager . "YouTube Sock" --platform=darwin --arch=arm64 --icon=icon.icns

Тут я указал название приложения, указал в качестве платформы darwin ( mac os ) в качестве архитектуры указал архитектуру своего нотпада — arm64

После успешной данной операции уже можно спокойно перетащить готовый app файл из новой директории «YouTube Sock-darwin-arm64» в директорию Applications и запускать полноценное приложение в своей системе, но если хотите создать dmg и поделится готовой сборкой с кем-нибудь то можно еще выполнить вот это

electron-installer-dmg YouTube\ Sock-darwin-arm64/YouTube\ Sock.app "Youtube-Sock" 

После этого в директории появится файл Youtube-Sock.dmg и из него можно установить программу на другой мак на архитектуре arm64 :)

На этом все, посмотреть весь код и забрать себе можно тут

Если есть вопросы, пишите сюда и подписывайтесь на обновления сайта тут