Как писать десктопные приложения на 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

Пікірлер: 31

  • @_ateros
    @_ateros Жыл бұрын

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

  • @codihuman

    @codihuman

    7 ай бұрын

    ✔ 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

    7 ай бұрын

    Installed GIT! Fixed!

  • @islam_in_the_west
    @islam_in_the_west4 ай бұрын

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

  • @user-mm9ys8rk4c
    @user-mm9ys8rk4c9 ай бұрын

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

  • @_ateros

    @_ateros

    9 ай бұрын

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

  • @VEGPIX
    @VEGPIX10 ай бұрын

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

  • @_ateros

    @_ateros

    10 ай бұрын

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

  • @user-ml2yz6ck7v
    @user-ml2yz6ck7v Жыл бұрын

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

  • @_ateros

    @_ateros

    Жыл бұрын

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

  • @saydumkhalibekov
    @saydumkhalibekov10 ай бұрын

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

  • @_ateros

    @_ateros

    10 ай бұрын

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

  • @anar2609
    @anar2609 Жыл бұрын

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

  • @_ateros

    @_ateros

    Жыл бұрын

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

  • @tukituk2759
    @tukituk27599 ай бұрын

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

  • @_ateros

    @_ateros

    9 ай бұрын

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

  • @ISYHIBC
    @ISYHIBC3 ай бұрын

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

  • @_ateros

    @_ateros

    3 ай бұрын

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

  • @placid3495
    @placid3495 Жыл бұрын

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

  • @_ateros

    @_ateros

    Жыл бұрын

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

  • @gregdmitriev2784
    @gregdmitriev2784 Жыл бұрын

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

  • @_ateros

    @_ateros

    Жыл бұрын

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

  • @roobengood

    @roobengood

    8 ай бұрын

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

  • @nixaristix1819
    @nixaristix181910 ай бұрын

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

  • @_ateros

    @_ateros

    10 ай бұрын

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

  • @AlexanderOsnovnoi
    @AlexanderOsnovnoi9 ай бұрын

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

  • @_ateros

    @_ateros

    9 ай бұрын

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

  • @xsgsdsdgsdgsd1760
    @xsgsdsdgsdgsd17609 ай бұрын

    Ни чего не понятно, но очень интересно))) после команды 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

    9 ай бұрын

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

  • @xsgsdsdgsdgsd1760

    @xsgsdsdgsdgsd1760

    9 ай бұрын

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

  • @_ateros

    @_ateros

    9 ай бұрын

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

Келесі