Революция в мире IT | Как написать своё приложение без WinAPI и C++

Ноунеймовая фабрика клипает гайды?

Не так давно я начал интересоваться разработкой приложений. Начал конечно же с C++ и C# и не пожалел. Поэтому я решил найти что-то более простое и удобное. Python тут не в тему, его скорость работы просто отстой, а вот Node.JS, да и JavaScript, в целом, будет хорошим выбором.

Так что сегодня я быстренько расскажу как написать своё приложение на связке Node.JS + Electron.
P.S: Если у вас есть что добавить - будет круто!

Дисклеймер: В этой статье я не буду разжёвывать концепции языка JavaScript, лишь затрону npm. Я надеюсь что у вас уже есть нужные знания.

Но если знаний нет: https://learn.javascript.ru/ (не реклама)

Начало: Начало!
В начале начал быстро расскажу о том, что такое Electron. Electron - это шедевр выпущенный компанией GitHub, представляет собой фреймворк написанный на C++, который и поможет нам стать тру софтваре инжинерами. Одно из его огромных преимуществ - использование HTML5 и CSS3 в качестве инструментов создания интерфейса. Так что если вы писали сайта - вам будет в кайф.

Как установить сие чудо?

Заходим на https://nodejs.org/en/ (не реклама) и скачиваем ноды (Можно ЛТС, но лучше последний релиз). Дальше создаём папку на своём ведре, называем как угодно. Также советую скачать редактор кода, но можно и блокнот. (Советую https://code.visualstudio.com/ (не реклама), можно скачать, но есть и веб-версия (не советую))

Как только ноды установлены и место под проект готово - открываем консоль (Win + R, в поиске пишем cmd) и пишем следующее: npm i electron. Данная команда сразу создаст все нужные и файлы и скачает electron. (Зачастую загрузка зависает в конце, но это нормально)

Следующий шаг: создать главный файл и скрипт быстрого исполнения для него.
В корневой папке проекта (там же где node_modules и package.json) создаём файл index.js. Что-то типо того:

Теперь залетаем в файл package.json и видим вот это:


dependencies - это поле, которое содержит все загруженные модули (хотя это враньё и не все, но да ладно). Теперь добавим следующее:


main - это поле содержащие имя файла, который будет точкой входа в проект (в нашем случае, центр нашего приложения), вместо index.js можно писать любое название (главное чтобы такой файл был в вашей папке).

scripts - это поле со скриптами, обычно умные дядки туда пишут команды сборки/запуска приложения (мы сделаем также).

start - это название скрипта, оно может быть любым и далее я расскажу в чём будет разница.

electron . - это исполняемая команда. electron - это бинарник который будет обрабатывать наше приложение а "." - ссылка на поле main.

Так почему же start? - Всё просто - меньше писать. Если вы назвали скрипт start, то для его запуска надо просто в cmd написать npm start, а если скрипт назван по-другому, скажем test, то написать надо будет npm run test.

Акт 1: я у мамы тимлид.

На этом подготовка окончена, заходим в index.js и пишем следующее:


Больше деталей тут - https://www.electronjs.org/ru/docs/latest/tutorial/tutorial-first-app (не реклама)

Выше я оставил ссылку на официальную документацию, но тут попробую всё разжевать (как смогу)

BrowserWindow - это класс, который создаст наше окно, а app - переменная, управляющая процессом приложения.

createWindow - как понятно из названия, функция которая будет генерировать окно.

В функции createWindow мы создаём константу, которая и будет нашим окном. width и height - размеры окна (ширина и высота соответственно).

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

win.loadFile - функция которая загрузит интерфейс для окна, а index.html - это сам файл интерфейса, который вы должны создать рядом:

На этом часть с логикой окна окончена, теперь заходим в index.html и пишем следующее:

Это HTML, который и будет выполнять роль интерфейса.

Заключение: Чё так мало?

На этом первое приложение готово, напиши в командной строке npm start и вы увидите первое окно.

Почему так мало? - Не знаю, зайдёт ли форумчанам эта тема, потому пишу вот так, если отзывы будут хорошие - выпущу вторую часть, где уже будет больше материала.

Но для особо пытливых оставлю все нужные материалы:

Выучить JS - https://learn.javascript.ru/ (не реклама)
Выучить HTML и CSS - https://webref.ru/layout/learn-html-css (не реклама)
Материалы по node.js - https://nodejs.org/ru/docs/ (не реклама)
Документация по electron - https://www.electronjs.org/docs/latest/ (не реклама)

Если есть какие-то вопросы, пишите мне в Вк: https://vk.com/id590999914

Спасибо за внимание, пишите как вам статья, может я что-то упустил или не рассказал - исправлю.