Как писать десктопные приложения на JavaScript, Electron, Node.js
Вставка
- Опубліковано 19 вер 2024
- Сегодня покажу вам как разрабатывать десктопные приложения на JavaScript с помощью фреймворка Electron под различные операционные системы будь-то Windows, MacOs или Linux.
Для работы нам понадобится VS Code и Node.js. В результате создадим простое приложение - "Калькулятор".
Иконка приложения:
www.flaticon.c...
Код урока:
github.com/ate...
#desktop #приложение #javascript #electron #nodejs #программированиеснуля #урокидляначинающих #js #html #css
Сборка приложения:
В любом месте на компьютере (например на рабочем столе), создайте новую папку Calc и откройте ее в VS Code. В терминале введите следующую команду:
npm init electron-app
Дождитесь пока завершится создание нового проекта, а после - удалите содержимое папки src и вместо него подставьте содержимое папки src из нашего проекта.
После этого в терминале введите команду:
npm run make
Когда работа команды завершится, в папке out вы найдете установочный и исполняемый файлы приложения для вашей операционной системы.
✔ 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!
Installed GIT! Fixed!
Добрый день! Возникает ошибка при попытке сделать сборку приложения. После ввода комнды npm run make выдает такое: An unhandled rejection has occurred inside Forge:
TypeError: Cannot read properties of undefined (reading 'createPackageWithOptions')
at WindowsApp.asarApp (D:\web\2024\Electron.js\calc-1
ode_modules\@electron\packager\dist\platform.js:203:30)
ппц как такое могло случиться что я наткнулся на этот канал только сейчас? Однозначно подписка
Спасибо большое 🔥🔥🙏 Рад, что вам понравился мой канал) 🙏
Спасибо за урок! С этого урока я начинаю изучать Js electron ❤
И вам спасибо 🙏 Рад, что смог вас заинтересовать)
Видео топ, хотелось бы больше видео про Electron
Спасибо большое🙏
Хорошо)
Спасибо, Хороший урок! Побольше бы уроков electron js, подписываюсь , надеясь на эти уроки
ОЧЕНЬ КРУТО ПОДОБНОГО Я И ЖДАЛ ТЫ ОТЛИЧНЫЙ МОТИВАТОР СПАСИБО ОГРОМНОЕ ПОЖАЛУСТА ПРОДАЛЖАЙ
Спасибо большое, мне очень приятно 🔥🔥🙏
спасибо Вам!
Желаю Вам много подписчиков!)
Спасибо большое) 🔥🙏🙏
Классная подача👍 Благодарю!
Спасибо 🙏 Рад, что вам понравилось)
Воу вообще топ! Я только собрался делать пет-проект на электрон! Давай пожалуйста еще про электрон сделай видосы! Какие там есть фичи и как у себя их использовать например. Как взаимодействовать с операционкой, ну с виндой допустим. Как лучше организовать файлы в проекте. Как туда затянуть реакт какой-нибудь. Так много вопросов у меня))
Спасибо большое 🙏🙏
Хорошо, постараюсь еще по электрону записать 😉
Было очень полезно и познавательно, спасибо
Рад, что вам понравилось 🙏🙏
ОООО! Прикольно ! Спасибо, друже ! Давай ИСЧО такого ) десктопы на React + Electron !!! Например какой-нить файловый менеджер. А я за это отпишусь и снова подпишусь, а потом ещё раз лайк поставлю )))
Кстати, а что можно вместо eval использовать ?
Спасибо большое) 🙏
Возьму на заметку, что вам интересна эта тема 😉
"Кстати, а что можно вместо eval использовать ?" - Написать свою функцию, которая будет парсить строку и выполнять соответствующие действия.
я бы перед вызовом ивала провалидировал строку на предмет, что там только цыфры и операции
Спасибо за урок.
Подскажите, возникает следующая ошибка при запуске приложения на windows 7 "....exe. не является приложением Win32"
Сборку делал как x32, так и x64
При запуске на win10,11 такой ошибки не возникает и приложение работает
Может поможет вот эта команда -
npm run package -- --platform=win32 --arch=ia32
@@AterosDev пробовал, не помогает(
Здравствуйте. Нашел вот эту статью - www.electronjs.org/ru/blog/windows-7-to-8-1-deprecation-notice
Кажется они прекратили поддержку windows ниже десятой. Я думаю можно попробавать (если делаете для себя и несложный проект) переустановить версию пакета на 22. Может так заработает...
Ссылка не рабочая((
Спасибо за подсказку, на виртуальной машине запустилось! На следующей неделе будем пробовать непосредственно на машинах с вин7
@@AterosDev
Извините, это я виноват, добавил скобку в конце поэтому не робатала ссылка. Уже исправил можете потом посмотреть если захотите.
Рад, что смог помочь. Удачи вам с проектом.
Когда ввожу npm create vite@latest и выбираю Svelte, TypeScript у меня выдает много разных ошибок, а если выбираю JavaScript, все нормально, что делать?
Может вот так получится -
npm create vite@latest app-name -- --template svelte-ts
@@AterosDev сразу при написании этой команды (как и при обычном) вылезают, например, следующие ошибки в tsconfig.json:
1. File '@tsconfig/svelte/tsconfig.json' not found.ts
2. Option '--resolveJsonModule' cannot be specified when 'moduleResolution' is set to 'classic'.
3. Referenced project 'c:/Users/Alex/project/app-name/tsconfig.node.json' may not disable emit.
Сейчас для новых проектов лучше Таури выбирать, а не Электрон...
Возможно когда-то запишу и по нему тоже урок 😉
ИМХО Tauri ничем не хуже, а местами даже и лучше
Надо будет потом записать по нему тоже урок 😉
Ни чего не понятно, но очень интересно))) после команды 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
А так все хорошом начиналось))))))))))
Здрастуйте. Скачайте репозиторий проекта по ссылке в описании ("Код урока") и запустите команду 'npm i', а после 'npm start'. Если все работает, попробуйте сравнить код моего проекта с вашим (скорее всего ошибка в файле package.json).
Спасибо за ответ. Скачал Код Урока и все запустилось. Я так понемаю из-за отсуствие папки package.json-lock , была проблема@@AterosDev
Я рад что все получилось 🙏 Там скоре всего в другом месте была проблема. Ничего страшного, пока-что тренируйтесь писать проект в этой папке (просто переписывая index.js/index.html).
Потом можете подробнее почитать о том как работает npm и package.json, это поможет вам лучше понять и определить проблему.