Сегодняшний блог будет посвящен разработке приложения Hello World с помощью ElectronJs. Мы создадим собственное настольное приложение с таймером обратного отсчета с помощью ElectronJs. ElectronJs — это фреймворк, который позволяет создавать кроссплатформенные приложения для настольных ПК с использованием JavaScript, CSS и HTML. Итак, все те веб-разработчики, которые долгое время работают с JS, HTML и CSS, это хорошая новость для всех вас. Создание настольного приложения теперь стало проще. Теперь, если вы можете создать веб-приложение, вы можете легко создать настольное приложение. Electron поставляется со всеми функциями и API, чтобы упростить разработку настольных приложений.
Чтобы создать настольное приложение с помощью Electron, вам потребуются следующие установленные инструменты/библиотеки:
1. NodeJs необходим :)
2. Текстовый редактор на ваш выбор. Я предпочитаю Visual Studio Code
3. Electronjs npm install electronic
Я постараюсь шаг за шагом провести вас к разработке таймера обратного отсчета.
4. Сначала инициализируйте свой проект с помощью npm.
Следуйте этой статье, чтобы связать свой проект с GitHub. Или просто инициализируйте проект с помощью этой команды: npm init -y
5. Измените файл main на src/main.js.
6. Определите команду запуска как «электрон».
Установить Электрон
7. Теперь установите электрон из диспетчера пакетов узла: npm install electronic
Создать main.js
Вы можете видеть, что мы импортировали ./countdown в строке № 2.
8. Создайте файл countdown.js.
9. Обратите внимание, что countdown.js и main.js должны находиться в папке src. Потому что в файле package.json мы определили основной файл как src/main.js
10. В countdown.jsмы напишем код для создания таймера обратного отсчета, который будет отображаться в приложении.
11. Создайте HTML-файл, в котором будет отображаться ваш таймер обратного отсчета. «обратный отсчет.html»
12. В строке 11 вы видите ‹script›require(‘./renderer’)‹/script› Это означает, что нам нужно создать еще один код JavaScript. Этот renderer.js работает как посредник. Сценарий рендерера правильно учитывает HTML-элементы и действия, которые он должен выполнять в приложении или возвращать обратно из приложения. В нашем случае наш файл рендерера выглядит так:
В строке 3 см. константу ipc, созданную для электронного ipcRenderer. IPC означает взаимодействие между процессами, которое управляет взаимодействием между процессами ipcMain и рендерера. ipc.send слушает запрос, выполненный пользователем через элементы HTML: кнопки и формы отправляют события. Чтобы узнать больше о ipcRenderer, перейдите по ссылке: ipcMain.
13. Теперь, когда мы определили ipc.on и ipc.send в файле сценария рендерера, нам нужно иметь ipcMain где-то в основном файле, который отвечает на эти запросы.
14. В вашем файле main.js вам нужно внести некоторые изменения и выполнить действия, чтобы реагировать на события ipc.
Теперь вы можете видеть: ipcMain создан как константа ipc в коде.const ipc = electronic.ipcMain. Соответственно вы можете увидеть метод, который запускает таймер обратного отсчета после того, как средство визуализации отправит сигнал в основной файл о том, что инициирован обратный отсчет.
15. Вот как должна выглядеть структура папок с файлами:
16. Теперь откройте командную строку или терминал и запустите проект: npm start
17. Если вы правильно выполнили описанные выше шаги, вы не должны увидеть никаких проблем, а интерфейс настольного приложения будет отображаться, как показано ниже:
18. Электрон создает собственное приложение, что также означает, что приложение является переносимым и работает в Linux, Windows и MacOS. Я начал создавать это приложение для Windows, а также протестировал тот же код на своей Ubuntu. Все, что вам нужно, это выполнить npm install electronic.
19. Вы также можете скачать полный код из моего репозитория electronjs. Также не стесняйтесь оставлять отзывы о любых ошибках, которые я мог допустить во время этого проекта.
Первоначально опубликовано на www.techjhola.com.
