Как сделать todo приложение

Обновлено: 08.01.2025

За пять шагов вы создадите свою программу для ведения списка дел: таск-менеджер, тудушку, называйте как хотите. Её можно сразу разместить в интернете и управлять задачами с любого компьютера или телефона. На это уйдёт 10 минут, и её можно будет бесконечно настраивать и дорабатывать под ваши потребности и предпочтения.

Для написания программы понадобится простой текстовый редактор. Мы рекомендуем установить Sublime Text, у него есть версии для всех компьютеров.

Наш список дел будет работать так: мы создадим специальную страницу для браузера. В неё будет вшита программа, которая и станет нашим таск-менеджером. Сначала сделаем каркас страницы, затем настроим внешний вид, а потом подключим код, который будет запоминать наши дела и управлять ими. Данные будут храниться во внутренней памяти браузера, то есть программой предполагается пользоваться на компьютере или телефоне, и он будет всё помнить. Можно будет перезагружать страницу, выключать и снова включать устройство — информация сохранится.

Создаём макет страницы

Сделаем пустую HTML-страницу, которая будет отвечать за наш список задач. В самом минимальном виде она выглядит так:

Надписи внутри угловых скобок — например, <body> — это специальные команды HTML. Они говорят браузеру, как вести себя с разными элементами страницы. Пока что на этой странице нет элементов, есть лишь служебная часть <head> . </head> и часть страницы, в которой позже будет наша программа — <body> . </body> . Это наш чистый лист.

Обратите внимание: в самом начале есть команда <!DOCTYPE html> . Она сообщает браузеру, что содержимое файла нужно показывать как веб-страницу. Если этого не сделать, то компьютер может не понять некоторые команды и страница будет выглядеть плохо.

Сохраним этот текст как файл task.html. Обратите внимание, что расширение здесь (то, что идёт после точки) именно .html, а не .doc или .txt! Когда мы откроем этот файл в браузере, то увидим белую страницу, на которой ничего нет.

Добавим в раздел <head> служебную информацию, которая расскажет компьютеру, как работать с этой страницей. С помощью надписей  мы оставляем комментарии — чтобы было понятно, что происходит в коде. Браузер на эти пометки не смотрит, это всё для нас:

Сохраняем и снова открываем в браузере — ничего не изменилось, кроме названия вкладки: теперь там «Список задач». Но «под капотом» произошло много всего: браузер теперь понимает кодировку страницы, умеет работать с русским языком, и у него в память загружен специальный набор инструментов, которые ускорят нашу работу.

Теперь наполним страницу смыслом: напишем заголовок, поставим поле для ввода задач и предусмотрим место для списка. Вставим этот кусок кода после тега <body> :

Сохраняем файл и обновляем страницу:

Настраиваем внешний вид

У нас уже есть страница для ведения дел, но она пока неопрятно выглядит и ничего не умеет. Разберёмся сначала с внешним видом.

Для того чтобы настроить шрифты, размеры и цвета на странице, мы будем использовать CSS-стили — это специальные команды, которые говорят браузеру, как отображать элементы на странице: какого их делать размера, как красить, какие выбирать шрифты и так далее. Стили можно подключить двумя способами: оформить отдельным файлом и дать на него ссылку или сделать всё внутри страницы. Так как у нас всего один файл, то будем работать внутри него, чтобы весь код был в одном месте. В больших проектах CSS-стили выносят в отдельный файл, чтобы из одного места управлять всеми страницами.

Чтобы использовать CSS-элементы внутри страницы, их помещают в служебный раздел <head> . Компьютер должен знать, что это именно стили для внешнего вида, а не команды что-то показать, поэтому они пишутся внутри тега <style type="text/css"> . </style> :

Помещаем этот кусок в самом конце раздела <head> , сохраняем файл и обновляем страницу:

Теперь наш список задач выглядит аккуратнее, но по-прежнему ничего не умеет. Начинаем программировать на JavaScript.

Пишем скрипт для работы с задачами

Всю скриптовую часть мы будем писать в конце страницы, чтобы сначала у нас в файле шёл CSS, затем HTML-код самой страницы, а после него — JavaScript. Поэтому все блоки помещаем после последнего тега </div> , когда у нас закончилась вся визуальная часть.

Нам понадобится библиотека jQuery, чтобы код мог быстро работать с полем ввода и списком задач.

jQuery — это отдельная библиотека, написанная на языке JavaScript. Проще говоря, это некий набор готовых функций, которые упрощают жизнь разработчика и написание кода. Особенность jQuery в том, что она позволяет напрямую работать с любым элементом на странице. Это нам пригодится для обработки конкретных дел из нашего списка.

Строго говоря, всю работу в этой задаче можно было проделать и без jQuery, на чистом JavaScript, но это займёт немного больше времени и будет не так удобно и красиво.

А теперь пишем сам скрипт, который будет делать следующее: ждать, пока пользователь не внесёт текст в поле ввода и не нажмёт клавишу ввода. После этого скрипт помещает новую задачу в память компьютера, а потом добавляет её в конец списка. Когда задача выполнена и на неё щёлкнули мышкой, скрипт удалит соответствующую строку из списка и из памяти устройства.

Добавим раздел с нашим скриптом после раздела с jQuery:

Заведём переменные для наших задач, которые отвечают за список:

Теперь напишем функцию, которая берёт из памяти наши задачи (если они там уже есть) и делает из них список. Функция — это маленькая программа внутри большой программы, в нашем случае она отвечает за визуализацию списка задач.

У каждого браузера есть своё внутреннее хранилище данных, где он запоминает информацию с разных сайтов. Хранилище называется localStorage. Любой сайт может туда что-то записать, а потом, когда понадобится, извлечь из памяти свои данные и работать с ними дальше.

LocalStorage хорош тем, что не обнуляет данные, когда вы перезагружаете страницу. То есть сохранённая тут информация будет жить в браузере, пока вы специально её не удалите. Но есть и минусы: если вы откроете страницу в другом браузере или с другого компьютера, там будет свой localStorage и посмотреть свои задачи с другого устройства не удастся.

Чтобы хранить единый список задач на разных компьютерах и получать к нему доступ по паролю, потребуется большое хозяйство с сервером, базой данных, авторизацией и кучей всего. Мы в такие дебри пока не полезем.

Скрипт теперь может брать из памяти наши старые задачи. Правда, если запустить его прямо сейчас, то ничего не произойдёт: ведь в самом начале в локальном хранилище ещё ничего нет. Но если мы уже работали с нашим списком задач, в нём могли остаться наши старые записи. Поэтому запустим эту функцию в самом начале скрипта на тот случай, если вдруг в памяти уже что-то есть:

Теперь при запуске скрипта он проверяет, нет ли чего-то старого в памяти, и как бы «вспоминает» ваши задачи.

Теперь нужно сделать так, чтобы мы могли вводить эти задачи. Для этого нам нужно отследить тот момент, когда пользователь ввёл текст в поле на странице и нажал Enter. Если он хоть что-то написал — запоминаем это и добавляем в список. Нестрашно, если сейчас вы не до конца понимаете, что в этом коде происходит, — всему своё время. Просто используйте его, так делает большинство программистов:

Теперь наша программа умеет запоминать задачи, которые вы ввели в поле ввода. Это происходит по нажатию клавиши Enter. Осталось сделать так, чтобы по клику на любой строке в перечне задач она исчезала из памяти и убиралась из списка:

Всё, планировщик готов. Копируем эти части кода в наш раздел со скриптом и проверяем работу:

Если мы закроем эту страницу или перезагрузим компьютер, то данные всё равно останутся в памяти. Значит, программа работает как нужно и у нас всё получилось.
Полный текст страницы (можно скопировать целиком и вставить в текстовый редактор):

Что можно ещё сделать

Можно перекрасить любой элемент на странице: для этого в таблице стилей CSS нужно прописать свойства нужных вам объектов. Наберите в Яндексе «CSS сменить фон страницы», и интернет вам подскажет решение.

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами.

Что необходимо для этого урока

Я рассчитываю, что вы уже имеете представление об основных процессах и процессах браузера.

Основы JavaScript.
Понимание HTML/CSS. .
Базовое представление о процессах Electron.

Весь код этого проекта можно скачать на GitHub.

CodeDraken/electron-todo

Todo app made in Electron. Contribute to CodeDraken/electron-todo development by creating an account on GitHub.

Чтобы не начинать с чистого листа, возьмём за основу шаблон Electron.

Примечание: рекомендую вам создать собственное, похожее приложение, после прочтения урока. Существует много способов создать такое приложение, будет более эффективно если вы сделаете это по-своему (к тому же, трудно работать над проектом по учебнику).

electron/electron-quick-start

Clone to try a simple Electron app. Contribute to electron/electron-quick-start development by creating an account on…

Загрузите шаблон
Запустите npm install и установите все дополнительные пакеты, которые вам нужны (я установил Standard JS стиль для линтинга)
Просмотрите все файлы. Везде есть комментарии, объясняющие работу кода.

Так выглядит м о й package.json файл. Мы разберём остальные файлы, когда начнём добавлять в них код.

И наконец, запустите npm start , чтобы убедиться что всё работает (я внёс изменения в HTML, чтобы отобразить текст).

Начнём настраивать шаблон (весь код есть на GitHub).

Use Strict

Я добавил “use strict” в начало каждого JS файла, чтобы использовать строгий JavaScript. С правилами строгого режима можно ознакомиться здесь.

Объектно-Ориентированный код

Мы будем применять ООП, используя классы, например класс Window для создания окон браузера (не путайте с глобальным объектом window). Вы можете добавлять дополнительные классы для других окон, но в этом уроке у нас будет только два окна.

Этот класс позволяет создавать окна с конфигурацией по умолчанию, загружать HTML-файл, открывать devtools в новом окне и корректно отображать окно, когда оно готово к показу. В нём также есть все методы BrowserWindow и всё, что мы добавим сверху.

После завершения рендеринга страницы, срабатывает событие ready-to-show . Это предотвращает мерцание на странице, когда подгружается много контента. Подробнее об этом можно прочитать здесь.

Если вы незнакомы с объектами JavaScript, рекомендую этот краткий обзор.

Примечание: вам решать, как проектировать своё приложение. Вам не обязательно использовать классы. Старайтесь писать «чистый» код и избегайте утечек памяти.

Подчищаем Main.js

Я удалил большую часть кода из шаблона, чтобы было наглядней. Кроме того, я добавил функцию main, которая на данный момент служит только для создания нового окна.

Системный шрифт в CSS

Подключить системный шрифт довольно просто, используйте font: caption в CSS (я добавил тег прямо в HTML).

Окончательная структура файлов

К концу урока структура файлов будет выглядеть так:

index.html — HTML код Todo List Window
index.js — JS рендер для Todo List Window
add.html — HTML код Add Todo Window
add.js — JS рендер для Add Todo Window
style.css — все CSS стили
DataStore.js — обрабатывает данные JSON
main.js — точка входа основного процесса
Window.js — класс для создания окон

У нас есть базовый шаблон, теперь давайте разберёмся, как будет выглядеть приложение, и как работают его компоненты.

Todo List Window

Отображает Задачи.
Отправляет данные о событиях в основной процесс, например delete todo.
Отправляет запрос на создание окна «Add Todos» в main process при создании новой Задачи.

Add Todos Window

Input для добавления Задачи.
Отправляет данные о новой Задаче в main process.

Main process (основной процесс)

Вносит и удаляет Задачи.
Считывает Задачи.
Отправляет Задачи в окно Todo List при загрузки приложения и обновлении.
Принимает данные из обоих окон. Управляет обменом данными между окнами.
Создаёт окна Todo List и Add Todo, когда поступает запрос из главного окна.

Хранение данных

У нас есть несколько вариантов хранения данных.

Local Storage API — хранилище браузера.
Disk Storage — хранение на диске пользователя в любом формате, например JSON, CSV и т.д.
Database — хранение в базе данных, локально или на сервере.

Каждый вариант имеет свои плюсы и минусы. Мы рассмотрим их все.

Поток данных

В целом поток данных/событий выглядит примерно так:

Эта схема выглядит как бомба с кучей проводов, которые нужно перерезать … постарайся не пугаться. Есть и другие способы доступа к main process, чтобы непосредственно добавлять/модифицировать Задачи, например можно использовать простую модель или electron.remote .

Предварительный просмотр

На данном этапе у приложения минимум стилизации, сейчас нас интересует поток данных. После закрытия приложения, Задачи сохраняются.

Займёмся данными. Я уже упоминал, что есть три способа хранить данные: local storage API , на диске или в базе данных.

Локальное хранилище и базы данных

Их можно легко переносить на веб-сайт и обратно. В этом приложении вы будете обрабатывать данные с помощью JS рендера, вот так:

В случае с базой данных, код будет выглядеть похожим образом, используйте вызов API либо на рендер, либо на main process. В этом уроке мы сосредоточимся на хранении файлов.

Хранение данных в файловой системе

Где мы будем хранить наши данные? Чаще всего они хранятся в папке «AppData», её расположение отличается в каждой операционной системе. Мы будем хранить данные здесь:

Linux:

/.config/<App Name>
Mac OS:

/Library/Application Support/<App Name>
Windows: C:\Users\<user>\AppData\Local\<App Name>

В этой статье попрактикуемся на чистом на JavaScript на примере создания программы «Списка дел (Todo List)». При написании кода будем использовать современный синтаксис, но также сделаем так чтобы он работал в старых браузерах, включая Internet Explorer 11.

Что такое Todo List?

Todo List – это список дел, которые вам нужно выполнить или того, что вы хотите сделать.

Традиционно их пишут на листке бумаги и организовывают в порядке приоритета. При выполнении задачи, её обычно вычеркивают из списка.

Но такой список можно вести не только на листке бумаги, но и в электронном виде, например, браузере.

Исходные коды SimpleTodoList

SimpleTodoList – это название проекта, который мы создадим в рамках данной статьи для ведения списка задач. Напишем его он на HTML, CSS и чистом JavaScript.

Пошаговый процесс его создания приведён в следующем разделе этой статьи, а в этом его демо и исходные коды.

Исходные коды SimpleTodoList расположены в соответствующей папки проекта «ui-components» на GitHub.

Состоит SimpleTodoList из 3 файлов: «index.html» (вёрстки), «simple-todo-list.css» (стилей) и «simple-todo-list.js» (скрипта).

SimpleTodoList использует localStorage для хранения задач. Это позволяет при повторном открытии этой страницы или её обновлении считывать данные с веб-хранилища и на их основе воссоздавать последнее состояние списка.

Сохранение данных в хранилище происходит всякий раз, когда изменяется состояния этого списка. Это необходимо для того, чтобы в localStorage всегда находились актуальные сведения.

добавлять новые задачи в список;
отмечать выполненные задачи (при этом они сразу исключаются из списка активных задач и переводятся в завершённый);
удалять элементы в корзину;
удалять окончательно задачи в корзине, а также при необходимости восстанавливать их;
переключаться между делами (активными, завершёнными и удалёнными);
автоматически сохранять списки дел в localStorage (необходимо для восстановления последнего состояния списка при повторном открытии страницы).

Описание процесса создания SimpleTodoList

Разработку SimpleTodoList выполним за 5 шагов.

Шаг 1. Создание файловой структуры

Файловая структура проекта:

Шаг 2. Добавление в index.html базовой структуры

Откроем «index.html», добавим в него базовую разметку, а также подключим файлы со стилями и JavaScript.

Шаг 3. Выполнение разметки самого todo

Разметим блок todo:

текстовое поле ( <input> с классом todo__text ) для ввода новой задачи;
кнопку .todo__add для добавления новой задачи в .todo__items ;
элемент управления <select> с выпадающим список задач для переключения между ними;
список задач .todo__items , добавлять их в него будем с помощью JavaScript.

Скриншот того, что у нас вышло:

HTML-код самой задачи:

Его формирование и вставку в .todo__items будем осуществлять с помощью JavaScript.

Значение атрибута data-todo-state будет определять состояние задачи:

active – активная;
completed – выполненная;
deleted – удалённая.

.todo__task – это элемент, который содержит текст задачи, а .todo__action – это кнопки для выполнения действий над задачей. С помощью них мы можем восстановить задачу (перевести её в активное состояние), отметить задачу как завершённую и удалить. Действие, которое выполняет кнопка .todo__action определяется значением атрибута data-todo-action .

Шаг 4. Написание стилей

Написать стили можно по-разному. Пример того, что получилось:

Конечный CSS код можно посмотреть на GitHub.

Разберём некоторые интересные моменты в этом коде.

1. Переключение отображение задач в .todo__items будем выполнять в зависимости от выбранной опции <select> . Для этого в вышеприведённом файле прописаны следующие стили:

Устанавливать значение атрибуту data-todo-option элемента .todo__items будем с помощью JavaScript при изменении выбранной опции <select> .

2. Скрытие кнопок для задач, которые не должны показываться для определённых состояний, осуществляется следующим образом:

Шаг 5. Напишем JavaScript

Написание кода начнём с создания объекта todo :

Он нужен только для того, чтобы лучше организовать наш код и не создавать кучу отдельных функций.

Поместим в todo следующие методы:

Начнём с init() . Данный метод будет осуществлять инициализацию Todo List.

Он выполняет следующие вещи:

получает из localStorage сохранённый список дел и если он есть, то вставляет его в .todo__items ;
назначает обработчик события change на элемент .todo__options ; в качестве обработчика используется update ;
назначает обработчик события click на document ; в качестве обработчика выступает action .

Код метода init() :

Когда мы указываем в качестве обработчика функцию или метод объекта, то нужно просто передать ссылку, а не вызов.

При указании this.action мы с помощью bind установили в качестве this текущий контекст. Это нужно чтобы мы могли в action() получить объект todo с помощью this .

Метод create() очень простой, он будет просто возвращать HTML код самой задачи с указанным текстом:

save() получает содержимое .todo__items и устанавливает его в localStorage:

update() используется в качестве обработчика:

При вызове устанавливает атрибуту data-todo-option элемента .todo__items значение выбранной опции <select> , а также значение свойству disabled элемента .todo__text :

add() добавляет при нажатии на кнопку задачу в список .todo__items . Для создания HTML-кода задачи используется create() :

action вызывается, когда происходит событие click на документе:

Параметр e – это объект события event . Его создаёт браузер и передаёт его в качестве первого аргумента action .

В коде e.target – это элемент, по которому кликнули. Так как нам нужны не любые клики, а только по определённым элементам, то используем следующие условия:

Если пользователь кликнул по .todo__add , то выполним следующие действия:

add() добавляет в список .todo__items новую задачу, а save() сохраняет все задачи (содержимое .todo__items ) в localStorage.

Когда пользователь кликнул на .todo__action выполняется следующий код:

Первое – получаем действие, которое нужно выполнить. Оно у нас находится в атрибуте data-todo-action . Далее находим элемент .todo__item и сохраняем его в переменную elemItem . Этот элемент нам понадобится дальше. После этого, если действие delete и состояние задачи delete , то удаляем элемент. В противном случае установим атрибуту data-todo-state элемента .todo__item значение action . В конце сохраним все изменения в localStorage с помощью save() .

Последнее что нужно сделать чтобы Todo работал это вызвать init :

Преобразование JavaScript для запуска в Internet Explorer 11

1. Выполним транспилирование, т.е. преобразуем исходный синтаксис в такой, который понимают старые браузеры, включая Internet Explorer 11.

Для этого воспользуемся онлайн инструментом Babel REPL:

В targets указали: defaults, ie 11 .

Полученный код скопируем и вставим в файл simple-todo-list.es5.js .

Теперь полученный синтаксис понимает Internet Explorer 11. Но этого не достаточно, т.к. в коде у нас остались два метода, который данный браузер не поддерживает. Это closest и remove .

2. Выполним полифилинг, т.е. добавим эти недостающие методы к старым браузерам путем предоставления им собственной версии.

В результате получился следующий код: simple-todo-list.es5.js .

Задачи

1. Добавить возможность создавать задачу при нажатии Enter.

2. Переписать код так, чтобы в localStorage сохранялись задачи не в виде кода HTML, а в формате массива объектов:

3. Внести в код возможность сортировки задач посредством перетаскивания (drag и drop).

5. Для любителей jQuery переписать весь код с использованием функций этой библиотеки.

Что необходимо для этого

Я рассчитываю, что вы уже имеете представление об основных процессах и процессах браузера.

Основы JavaScript.
Понимание HTML/CSS. .
Базовое представление о процессах Electron.

Весь код этого проекта можно скачать на GitHub.

Настройка проекта

Чтобы не начинать с чистого листа, возьмём за основу шаблон Electron.

Примечание: рекомендую вам создать собственное, похожее приложение, после прочтения статьи. Существует много способов создать такое приложение, будет более эффективно если вы сделаете это по-своему (к тому же, трудно работать над проектом по учебнику).

Загрузите шаблон
Запустите npm install и установите все дополнительные пакеты, которые вам нужны (я установил Standard JS стиль для линтинга)
Просмотрите все файлы. Везде есть комментарии, объясняющие работу кода.

Так выглядит мой package.json файл. Мы разберём остальные файлы, когда начнём добавлять в них код.

И наконец, запустите npm start , чтобы убедиться что всё работает (я внёс изменения в HTML, чтобы отобразить текст).

Настройка

Начнём настраивать шаблон (весь код есть на GitHub).

Use Strict

Объектно-Ориентированный код

Если вы незнакомы с объектами JavaScript, рекомендую этот краткий обзор.

Подчищаем Main.js

Системный шрифт в CSS

Подключить системный шрифт довольно просто, используйте font: caption в CSS (я добавил тег прямо в HTML).

Окончательная структура файлов

Структура файлов будет выглядеть так:

index.html — HTML код Todo List Window
index.js — JS рендер для Todo List Window
add.html — HTML код Add Todo Window
add.js — JS рендер для Add Todo Window
style.css — все CSS стили
DataStore.js — обрабатывает данные JSON
main.js — точка входа основного процесса
Window.js — класс для создания окон

Что делает это приложение

Todo List Window

Отображает Задачи.
Отправляет данные о событиях в основной процесс, например delete todo.
Отправляет запрос на создание окна «Add Todos» в main process при создании новой Задачи.

Add Todos Window

Input для добавления Задачи.
Отправляет данные о новой Задаче в main process.

Main process (основной процесс)

Вносит и удаляет Задачи.
Считывает Задачи.
Отправляет Задачи в окно Todo List при загрузки приложения и обновлении.
Принимает данные из обоих окон. Управляет обменом данными между окнами.
Создаёт окна Todo List и Add Todo, когда поступает запрос из главного окна.

Хранение данных

У нас есть несколько вариантов хранения данных.

Local Storage API — хранилище браузера.
Disk Storage — хранение на диске пользователя в любом формате, например JSON, CSV и т.д.
Database — хранение в базе данных, локально или на сервере.

Каждый вариант имеет свои плюсы и минусы. Мы рассмотрим их все.

Поток данных

В целом поток данных/событий выглядит примерно так:

Предварительный просмотр

Пишем менеджер данных

Займёмся данными. Я уже упоминал, что есть три способа хранить данные: local storage API , на диске или в базе данных.

Локальное хранилище и базы данных

В случае с базой данных, код будет выглядеть похожим образом, используйте вызов API либо на рендер, либо на main process. Мы сосредоточимся на хранении файлов.

Хранение данных в файловой системе

Linux:

/.config/<App Name>
Mac OS:

/Library/Application Support/<App Name>
Windows: C:\Users\<user>\AppData\Local\<App Name>

Чтобы вернуть корректный адрес, в Electron можно использовать метод app.getPath('userData') . Чтобы сохранять данные на диск, можно написать функцию или воспользоваться библиотекой.

Используем библиотеку для хранение данных

Сохранять данные в Node довольно просто — нужно конвертировать данные в строку и использовать fs.writeFile . Так как мы используем Electron, то будем использовать библиотеку, созданную специально для него.

Эта библиотека отвечает за создание файла JSON, а также за чтение и запись в него. Например:

DataStore.js

Обратите внимание, что electron-store использует конструктор объекта для Store . Давайте расширим этот объект ( так же, как мы сделали с BrowserWindow ), чтобы мы могли хранить несколько списков Задач, если захотим.

Класс DataStore будет выглядеть так:

Теперь все Задачи хранятся как массив в объекте, а также мы имеем методы для взаимодействия с ними. Хранение данных в объекте предотвращает выполнение затратных операций с файлами, каждый раз когда мы хотим получить доступ к Задачам. Есть плюсы и минусы такого подхода, но это выходит за рамки статьи.

Методы get и set относятся к модулю electron-store, они обрабатывают файл JSON.

Возвращать this не обязательно, но это хороший приём, который позволяет создать цепочку вызовов. Вот так, DataStore выглядит на практике:

Вот что происходит в папке приложения (это Linux):

Обратите внимание, что в папке приложения есть и другие файлы, которые мы не создавали.

Посмотрим на новую схему

Давайте наконец соединим все кусочки. Помните эту схему?

На данный момент мы уже создали Data Manager ( DataStore.js ) и можем создавать окна с помощью класса Window. Остались только обработчики событий (линии на схеме).

Примечание:

Я убрал «Complete to do», чтобы было проще.

Структура файлов

Хочу напомнить, как выглядит структура файлов на данный момент:

Прослушиватели событий в Main Process

Используем ipcMain.on() для прослушивания и myWindow.webContents.send() для отправки событий из основного процесса.

Согласно нашей схеме, нам нужно прослушивать:

Create Todo
Delete Todo
Add Todo
Create Todo Window

Так выглядит окончательная версия main.js, в который я добавил необходимые прослушиватели:

Здесь всё предельно просто, разве что, можно немного подчистить. Мы прослушиваем событие, после чего используем экземпляр todosData из DataStore , для обработки данных.

Обработчики событий для Todo List Window

Вот куда мы будем отправлять все события, которые мы слушаем в main.js. Здесь будет задействован выбор элементов DOM, поэтому в первую очередь, давайте посмотрим на HTML.

Для стилизации, я использую Spectre.css. Здесь нужно обратить внимание на button id и ul id.

JS файл для окна Todo List:

После нажатия на кнопку мы отправляем событие ‘add-todo-window’ в main process, который в свою очередь открывает Add Todo Window.

Далее, мы прослушиваем событие ‘todos’, которое передаётся из main process при первой загрузки окна, и когда в Задачу вносятся изменения.

После этого мы генерируем HTML для этих Задач и добавляем прослушиватели событий, которые обрабатывают клик по элементу, отправляя событие ‘delete-todo’ в main process.

Обработчики событий для Add Todo Window

Здесь всё очень просто.

Основная часть HTML — это форма:

Как только форма отправлена, мы передаём введённый текст. После этого очищаем поле input, чтобы можно было ввести другие значений.

Читайте также: