Загрузка...

Revolution in the world of IT | How to write your application without WinAPI and C++

Thread in Node.js created by ruletkasuperstar Mar 8, 2023. 233 views

  1. ruletkasuperstar
    ruletkasuperstar Topic starter Mar 8, 2023 Banned 143 Nov 17, 2022
    Ноунеймовая фабрика клипает гайды?

    Не так давно я начал интересоваться разработкой приложений. Начал конечно же с 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. Что-то типо того:
    [IMG]
    Теперь залетаем в файл package.json и видим вот это:
    [IMG]


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    win.loadFile - функция которая загрузит интерфейс для окна, а index.html - это сам файл интерфейса, который вы должны создать рядом:
    [IMG]
    На этом часть с логикой окна окончена, теперь заходим в index.html и пишем следующее:
    [IMG]
    Это 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

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