Создайте приложение Notes с помощью Electron для Linux, MacOS и Windows.

Введение

Electron — это платформа, которая позволяет создавать собственные настольные приложения с использованием таких веб-технологий, как JavaScript, HTML и CSS. В этом уроке мы создадим простое приложение для заметок, которое можно использовать в Linux, MacOS и Windows.

Предварительные условия

Установите Node.js и npm. Если у вас их еще нет, загрузите и установите их с https://nodejs.org/.

Начальная конфигурация

Создайте новую папку для своего проекта и перейдите внутрь:

mkdir electron-notes-app && cd electron-notes-app

Инициализируйте новый проект npm:

npm init -y

Установить Электрон

npm install electron --save-dev

Создание структуры проекта

Создайте следующие файлы и папки:

main.js (основной файл приложения Electron)
index.html (пользовательский интерфейс приложения)
styles.css (стили приложения)

Структурирование пользовательского интерфейса

В файле index.html введите следующий код:

<!DOCTYPE html>
 <html>
 <head>
 <title>Electron Notes App</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <div class="container">
 <textarea id="noteContent"></textarea>
 <button id="saveBtn">Salva Nota</button>
 </div>
 <script src="renderer.js"></script>
 </body>
 </html>

В styles.css добавьте несколько основных стилей:

.container {
 padding: 20px;
 display: flex;
 flex-direction: column;
 height: 100vh;
 }

 textarea {
 flex: 1;
 margin-bottom: 10px;
 }

 button {
 align-self: flex-end;
 }

Электронная логика

В main.js добавьте:

const { app, BrowserWindow } = require('electron');

 let win;

 function createWindow() {
 win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true
 }
 });
 win.loadFile('index.html');
 }

 app.whenReady().then(createWindow);

 app.on('window-all-closed', () => {
 if (process.platform!== 'darwin') {
 app.quit();
 }
 });

 app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) {
 createWindow();
 }
 });

Логика приложения

Создайте файл renderer.js и добавьте:

const fs = require('fs');

 document.getElementById('saveBtn').addEventListener('click', () => {
 const content = document.getElementById('noteContent').value;
 fs.writeFileSync('nota.txt', content);
 alert('Nota salvata con successo!');
 });

Этот код будет сохранять содержимое текстовой области в файл с именем nota.txt каждый раз при нажатии кнопки.

Запустите приложение

В файле package.json отредактируйте раздел «scripts», включив в него:

"start": "electron main.js"

Теперь вы можете запустить приложение с помощью:

npm start

Заключение

Вы создали приложение для заметок с помощью Electron, которое работает в Linux, MacOS и Windows. Вы можете расширить это приложение, добавив такие функции, как управление несколькими заметками, внедрение базы данных или интеграцию с облачными сервисами.