Как писать десктопные приложения на JavaScript, Electron, Node.js

Сегодня покажу вам как разрабатывать десктопные приложения на JavaScript с помощью фреймворка Electron под различные операционные системы будь-то Windows, MacOs или Linux.
Для работы нам понадобится VS Code и Node.js. В результате создадим простое приложение - "Калькулятор".
Иконка приложения:
www.flaticon.com/free-icon/ca...
Код урока:
github.com/ateros-lab/calc
#desktop #приложение #javascript #electron #nodejs #программированиеснуля #урокидляначинающих #js #html #css

[@_ateros]

Сборка приложения: В любом месте на компьютере (например на рабочем столе), создайте новую папку Calc и откройте ее в VS Code. В терминале введите следующую команду: npm init electron-app Дождитесь пока завершится создание нового проекта, а после - удалите содержимое папки src и вместо него подставьте содержимое папки src из нашего проекта. После этого в терминале введите команду: npm run make Когда работа команды завершится, в папке out вы найдете установочный и исполняемый файлы приложения для вашей операционной системы.

[@codihuman]

✔ Locating custom template: "base" ✖ Command failed: git init 'git' is not recognized as an internal or external command, operable program or batch file. Kak eto reshit'? Spasibo!

[@codihuman]

Installed GIT! Fixed!

[@islam_in_the_west]

Спасибо, Хороший урок! Побольше бы уроков electron js, подписываюсь , надеясь на эти уроки

[@saydumkhalibekov]

Классная подача👍 Благодарю!

[@_ateros]

Спасибо 🙏 Рад, что вам понравилось)

[@user-mm9ys8rk4c]

ппц как такое могло случиться что я наткнулся на этот канал только сейчас? Однозначно подписка

[@_ateros]

Спасибо большое 🔥🔥🙏 Рад, что вам понравился мой канал) 🙏

[@VEGPIX]

Спасибо за урок! С этого урока я начинаю изучать Js electron ❤

[@_ateros]

И вам спасибо 🙏 Рад, что смог вас заинтересовать)

[@user-ml2yz6ck7v]

Видео топ, хотелось бы больше видео про Electron

[@_ateros]

Спасибо большое🙏 Хорошо)

[@anar2609]

ОЧЕНЬ КРУТО ПОДОБНОГО Я И ЖДАЛ ТЫ ОТЛИЧНЫЙ МОТИВАТОР СПАСИБО ОГРОМНОЕ ПОЖАЛУСТА ПРОДАЛЖАЙ

[@_ateros]

Спасибо большое, мне очень приятно 🔥🔥🙏

[@ISYHIBC]

Было очень полезно и познавательно, спасибо

[@_ateros]

Рад, что вам понравилось 🙏🙏

[@tukituk2759]

спасибо Вам! Желаю Вам много подписчиков!)

[@_ateros]

Спасибо большое) 🔥🙏🙏

[@placid3495]

Воу вообще топ! Я только собрался делать пет-проект на электрон! Давай пожалуйста еще про электрон сделай видосы! Какие там есть фичи и как у себя их использовать например. Как взаимодействовать с операционкой, ну с виндой допустим. Как лучше организовать файлы в проекте. Как туда затянуть реакт какой-нибудь. Так много вопросов у меня))

[@_ateros]

Спасибо большое 🙏🙏 Хорошо, постараюсь еще по электрону записать 😉

[@gregdmitriev2784]

ОООО! Прикольно ! Спасибо, друже ! Давай ИСЧО такого ) десктопы на React + Electron !!! Например какой-нить файловый менеджер. А я за это отпишусь и снова подпишусь, а потом ещё раз лайк поставлю ))) Кстати, а что можно вместо eval использовать ?

[@_ateros]

Спасибо большое) 🙏 Возьму на заметку, что вам интересна эта тема 😉 "Кстати, а что можно вместо eval использовать ?" - Написать свою функцию, которая будет парсить строку и выполнять соответствующие действия.

[@roobengood]

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

[@nixaristix1819]

Сейчас для новых проектов лучше Таури выбирать, а не Электрон...

[@_ateros]

Возможно когда-то запишу и по нему тоже урок 😉

[@AlexanderOsnovnoi]

ИМХО Tauri ничем не хуже, а местами даже и лучше

[@_ateros]

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

[@xsgsdsdgsdgsd1760]

Ни чего не понятно, но очень интересно))) после команды npm run start выдал ошибку C:\Users\User>npm run start npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: C:\Users\User\AppData\Local pm-cache\_logs\2023-09-18T08_25_59_631Z-debug-0.log А так все хорошом начиналось))))))))))

[@_ateros]

Здрастуйте. Скачайте репозиторий проекта по ссылке в описании ("Код урока") и запустите команду 'npm i', а после 'npm start'. Если все работает, попробуйте сравнить код моего проекта с вашим (скорее всего ошибка в файле package.json).

[@xsgsdsdgsdgsd1760]

Спасибо за ответ. Скачал Код Урока и все запустилось. Я так понемаю из-за отсуствие папки package.json-lock , была проблема@@_ateros

[@_ateros]

Я рад что все получилось 🙏 Там скоре всего в другом месте была проблема. Ничего страшного, пока-что тренируйтесь писать проект в этой папке (просто переписывая index.js/index.html). Потом можете подробнее почитать о том как работает npm и package.json, это поможет вам лучше понять и определить проблему.