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

  Переглядів 9,399

Ateros

Ateros

Рік тому

Сегодня покажу вам как разрабатывать десктопные приложения на 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

КОМЕНТАРІ: 31
@_ateros
@_ateros Рік тому
Сборка приложения: В любом месте на компьютере (например на рабочем столе), создайте новую папку Calc и откройте ее в VS Code. В терминале введите следующую команду: npm init electron-app Дождитесь пока завершится создание нового проекта, а после - удалите содержимое папки src и вместо него подставьте содержимое папки src из нашего проекта. После этого в терминале введите команду: npm run make Когда работа команды завершится, в папке out вы найдете установочный и исполняемый файлы приложения для вашей операционной системы.
@codihuman
@codihuman 6 місяців тому
✔ 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
@codihuman 6 місяців тому
Installed GIT! Fixed!
@islam_in_the_west
@islam_in_the_west 3 місяці тому
Спасибо, Хороший урок! Побольше бы уроков electron js, подписываюсь , надеясь на эти уроки
@saydumkhalibekov
@saydumkhalibekov 9 місяців тому
Классная подача👍 Благодарю!
@_ateros
@_ateros 9 місяців тому
Спасибо 🙏 Рад, что вам понравилось)
@user-mm9ys8rk4c
@user-mm9ys8rk4c 8 місяців тому
ппц как такое могло случиться что я наткнулся на этот канал только сейчас? Однозначно подписка
@_ateros
@_ateros 8 місяців тому
Спасибо большое 🔥🔥🙏 Рад, что вам понравился мой канал) 🙏
@VEGPIX
@VEGPIX 8 місяців тому
Спасибо за урок! С этого урока я начинаю изучать Js electron ❤
@_ateros
@_ateros 8 місяців тому
И вам спасибо 🙏 Рад, что смог вас заинтересовать)
@user-ml2yz6ck7v
@user-ml2yz6ck7v Рік тому
Видео топ, хотелось бы больше видео про Electron
@_ateros
@_ateros Рік тому
Спасибо большое🙏 Хорошо)
@anar2609
@anar2609 Рік тому
ОЧЕНЬ КРУТО ПОДОБНОГО Я И ЖДАЛ ТЫ ОТЛИЧНЫЙ МОТИВАТОР СПАСИБО ОГРОМНОЕ ПОЖАЛУСТА ПРОДАЛЖАЙ
@_ateros
@_ateros Рік тому
Спасибо большое, мне очень приятно 🔥🔥🙏
@ISYHIBC
@ISYHIBC 2 місяці тому
Было очень полезно и познавательно, спасибо
@_ateros
@_ateros 2 місяці тому
Рад, что вам понравилось 🙏🙏
@tukituk2759
@tukituk2759 8 місяців тому
спасибо Вам! Желаю Вам много подписчиков!)
@_ateros
@_ateros 8 місяців тому
Спасибо большое) 🔥🙏🙏
@placid3495
@placid3495 Рік тому
Воу вообще топ! Я только собрался делать пет-проект на электрон! Давай пожалуйста еще про электрон сделай видосы! Какие там есть фичи и как у себя их использовать например. Как взаимодействовать с операционкой, ну с виндой допустим. Как лучше организовать файлы в проекте. Как туда затянуть реакт какой-нибудь. Так много вопросов у меня))
@_ateros
@_ateros Рік тому
Спасибо большое 🙏🙏 Хорошо, постараюсь еще по электрону записать 😉
@gregdmitriev2784
@gregdmitriev2784 Рік тому
ОООО! Прикольно ! Спасибо, друже ! Давай ИСЧО такого ) десктопы на React + Electron !!! Например какой-нить файловый менеджер. А я за это отпишусь и снова подпишусь, а потом ещё раз лайк поставлю ))) Кстати, а что можно вместо eval использовать ?
@_ateros
@_ateros Рік тому
Спасибо большое) 🙏 Возьму на заметку, что вам интересна эта тема 😉 "Кстати, а что можно вместо eval использовать ?" - Написать свою функцию, которая будет парсить строку и выполнять соответствующие действия.
@roobengood
@roobengood 7 місяців тому
я бы перед вызовом ивала провалидировал строку на предмет, что там только цыфры и операции
@nixaristix1819
@nixaristix1819 9 місяців тому
Сейчас для новых проектов лучше Таури выбирать, а не Электрон...
@_ateros
@_ateros 9 місяців тому
Возможно когда-то запишу и по нему тоже урок 😉
@AlexanderOsnovnoi
@AlexanderOsnovnoi 8 місяців тому
ИМХО Tauri ничем не хуже, а местами даже и лучше
@_ateros
@_ateros 8 місяців тому
Надо будет потом записать по нему тоже урок 😉
@xsgsdsdgsdgsd1760
@xsgsdsdgsdgsd1760 7 місяців тому
Ни чего не понятно, но очень интересно))) после команды 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
@_ateros 7 місяців тому
Здрастуйте. Скачайте репозиторий проекта по ссылке в описании ("Код урока") и запустите команду 'npm i', а после 'npm start'. Если все работает, попробуйте сравнить код моего проекта с вашим (скорее всего ошибка в файле package.json).
@xsgsdsdgsdgsd1760
@xsgsdsdgsdgsd1760 7 місяців тому
Спасибо за ответ. Скачал Код Урока и все запустилось. Я так понемаю из-за отсуствие папки package.json-lock , была проблема@@_ateros
@_ateros
@_ateros 7 місяців тому
Я рад что все получилось 🙏 Там скоре всего в другом месте была проблема. Ничего страшного, пока-что тренируйтесь писать проект в этой папке (просто переписывая index.js/index.html). Потом можете подробнее почитать о том как работает npm и package.json, это поможет вам лучше понять и определить проблему.
Glow Stick Secret 😱 #shorts
00:37
Mr DegrEE
Переглядів 38 млн
ELECTRON: why people HATE it, why devs USE it
17:19
The Linux Experiment
Переглядів 178 тис.
Every CSS Animation property
9:26
chunkydotdev
Переглядів 40 тис.
Работа с файлами в Electron JS
15:32
Ateros
Переглядів 2,1 тис.
Мобильные приложения на JavaScript (PWA)
14:53
Первая программа на JavaScript. Как выполняется код на JavaScript
21:00
WebDev с нуля. Канал Алекса Лущенко
Переглядів 29 тис.
Артём Кузвесов - Electron + Node.js = ❤️
49:39
TechTrain
Переглядів 2 тис.
Glow Stick Secret 😱 #shorts
00:37
Mr DegrEE
Переглядів 38 млн