Тёмный

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

Ateros
Подписаться 2,4 тыс.
Просмотров 9 тыс.
50% 1

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

Опубликовано:

 

11 апр 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 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 9 месяцев назад
Спасибо за урок! С этого урока я начинаю изучать Js electron ❤
@_ateros
@_ateros 9 месяцев назад
И вам спасибо 🙏 Рад, что смог вас заинтересовать)
@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, это поможет вам лучше понять и определить проблему.
Далее
Normal vs Smokers !! 😱😱😱
00:12
Просмотров 2,2 млн
Работа с файлами в Electron JS
15:32
Просмотров 2,1 тыс.
Every CSS Animation property
9:26
Просмотров 41 тыс.