Разработка веб-приложения - ежедневника (менеджер задач, "список дел") с функцией голосового управления

Размещено на http://www.allbest.ru/

Содержание

• Введение
• 1. Постановка задачи
• 2. Используемые технологии
• 2.1 HTML
• 2.2 Каскадные таблицы стилей CSS, SCSS
• 2.3 JavaScript
• 2.4 DOM
• 2.5 React
• 2.6 NodeJS
• 2.7 NPM
• 2.8 Yandex SpeechKit
• 3. Файловая структура проекта и сборка
• 4. Описание интерфейса
• 5. Описание архитектуры приложения
• 5.1 Серверная часть и запросы
• 5.2 Клиентская часть
• 5.3 Работа хранилища
• 5.4 Код интерфейса
• 5.5 Компонент голосового управления
• 5.6 Компонент элемента списка задач
• 5.7 Кратко о взаимодействии компонентов
• Заключение
• Список использованных источников
• Приложение
• Введение

Темой для дипломного проекта было выбрано написание веб-приложения. Это ежедневник (менеджер задач, «список дел») с функцией голосового управления. Конечно, в интернете можно найти множество уже давно работающих всевозможных планировщиков, календарей с напоминаниями, органайзеров и task-менеджеров. Но в данном проекте были поставлены конкретные цели - сделать удобное и легкое приложение с интуитивно понятным интерфейсом. Требуется, чтобы пользователь мог быстро добавить записи в список, не тратя на это больше своего времени, чем если бы он делал записи в обычный блокнот. Функция голосового управления поможет еще ускорить этот процесс.

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

Технологии, которые были использованы при разработке:

Для клиентской части приложения это - HTML, CSS и JavaScript. Но не в чистом и первозданном виде. В качестве инструмента написания стилей использовался SCSS - диалект языка SASS. SASS, в свою очередь, это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей. Проще говоря, использовалась небольшая надстройка над CSS.

Также, для разработки клиентской была использована JavaScript-библиотека React. Это библиотека для построения пользовательских интерфейсов. React отвечает за отображение видимых компонентов на странице. Также в связке с React был использован Redux - шаблон для управления состояниями приложения. Состояния приложения - это все динамические данные, которые меняются в процессе пользования приложением, в данном случае - это список дел с их параметрами (датой, названием задачи, временем и т.д.). То есть Redux - это система управления данными приложения на клиентской части. Код Redux-шаблона, написанный на JavaScript, получает и отправляет данные, сохраняет их в памяти и обеспечивает к ним доступ. React обращается к Redux, чтобы получить «список дел», а Redux делает динамический ajax-запрос (без перезагрузки страницы) к серверу, чтобы получить эти данные.

Серверная часть написана на JavaScript с использованием фреймворка Express и работает на платформе NodeJS. Ближайшая популярная альтернатива этой связке - язык PHP. Для хранения данных на сервере используется СУБД MySQL. Скрипт, написанный на JavaScript, обращается к ней с обычными SQL-запросами для выборки, добавления и изменения данных.

Основная часть пояснительной записки содержит следующие секции:

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

- Описание файловой структуры проекта, особенностей его компиляции.

- Описание интерфейса с изображениями, отображающими процесс работы приложения.

- Описание структуры приложения. Примеры кода с пояснениями. Общее описание иерархии и взаимодействия компонентов приложения. Описание серверной и клиентской частей приложения.

1. Постановка задачи

В данном дипломном проекте стояла задача реализовать веб-приложение «Ежедневник» с функцией голосового управления. Также программное обеспечение должно удовлетворять следующим критериям и реализовывать следующие возможности:

- Получение списка дел

- Добавление новых элементов и удаление старых

- Редактирование элементов списка

- Опциональная возможность задать время для каждой задачи

- Возможность отмечать задачи как выполненные или невыполненные

- Навигация при помощи календаря

- Голосовое управление

- Система пользователей. Форма авторизации

- Ограничение доступа к функционалу приложения без авторизации

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

- Простота и читаемость кода для дальнейшей поддержки

- Хранение данных в СУБД MySQL

- Получение и отправка данных на сервер при помощи AJAX-запросов (без перезагрузки страницы)

файловый приложение код голосовой

2. Используемые технологии

2.1 HTML

HTML - стандартизированный язык гипертекстовой разметки документов в интернете. Разработчики создают HTML-разметку, браузер получает такую разметку, обрабатывает ее и отображает полученные результаты на экране.

Для управления отображением используются HTML-теги, внутри которых могут располагаться текстовые узлы, или другие теги, или не могут. Например:

<b>Очень жирный текст</b>

Текст, который находится между <b> и </b>, браузер должен отобразить с повышенной жирностью. <b> и </b> - открывающий и закрывающий теги соответственно.

Для навигации между различными HTML-страницами используются гиперссылки. Они задаются при помощи HTML-тега <a></a>. Например, <a href=http://wikipedia.org>WikiPeDia</a>.

На раннем этапе развития различные браузеры были не согласованы друг с другом, поддерживали различные стандарты, внедряли свои собственные наборы элементов, что приводило к путанице. Особенной проблемой было написание кросс-браузерных сценариев на JavaScript.

Сейчас популярность набирают браузеры, которые следуют стандартам W3C (Mozilla Firefox, Google Chrome, Opera, Safari). Также в современной практике существует возможность упростить разработку кросс-браузерных программ на языке JavaScript с помощью различных библиотек и фреймворков. Например, таких как jQuery, sIFR и др.

В интернете HTML используется повсеместно. В данный момент его актуальная версия - это HTML5. Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

Конечно, без него трудно обойтись при разработке веб-приложения. Но в чистом виде в этом проекте он используется не много. Есть одна главная статичная html-страница, в которую встраивается JavaScript-приложение, которое отвечает за отображение всех нужных элементов.

2.2 Каскадные таблицы стилей CSS, SCSS

CSS - язык описания внешнего вида документа. Если HTML используется для описания структуры документа, то CSS отвечает за внешний вид. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

Вот пример CSS-кода:

b {

font-size: 18px;

}

Этот код означает, что ко всем тегам <b></b> будет применяться свойство font-size: 18px. То есть размер шрифта текста внутри тега <b> будет установлен в 18 пикселей.

Sass (Syntactically Awesome Stylesheets) -- модуль, включенный в Haml. Sass -- это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык SASS имеет два синтаксиса:

SASS -- отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;

SCSS (Sassy CSS) -- использует фигурные скобки, как и сам CSS.

То есть SCSS - это немного сложнее и мощнее, чем CSS, вот и вся разница.

2.3 JavaScript

JavaScript - это прототипно-ориентированный сценарный язык программирования.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

При помощи JavaScript можно легко манипулировать DOM-узлами (это элементы HTML-страницы). Создавать новые элементы, менять их CSS-стили, менять содержимое элементов. Делать асинхронные запросы к серверу для получения и отправки данных без перезагрузки страницы.

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

В данном проекте JavaScript - основа. Но только дополненная библиотекой React для удобного, читаемого и логичного описания структуры элементов в интерфейсе приложения.

Также JavaScript используется и на серверной части приложения, фреймворком Express.

Итак, если HTML можно все же назвать сердцем стека технологий, которые используются в этой работе, то JavaScript - это вся остальная кровеносная и нервная система, а также и мозг.

2.4 DOM

DOM (от англ. Document Object Model -- «объектная модель документа») -- это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

Изначально различные браузеры имели собственные модели документов (DOM), несовместимые с остальными. Для обеспечения взаимной и обратной совместимости, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.

2.5 React

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

React использует виртуальный DOM, то есть, если проще, то это еще одна копия всего HTML-документа в памяти. При изменении в ней React вносит изменения в существующий документ. Это нужно потому, что любые изменения в настоящей структуре DOM - довольно затратные по времени и ресурсам для браузера. Поэтому все изменения сначала отображается в виртуальном DOM, он сравнивается с предыдущей версией, и если есть изменения, то они вносятся в настоящее дерево элементов. Результат чего уже увидит пользователь.

В React используется HTML-подобная JSX-разметка. Это очень похоже на обычный HTML, но не является им. Пример:

var HelloMessage = React.createClass({

render: function() {

return <div>Hello {this.props.name}</div>; // это как-бы HTML внутри JavaScript

}

});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

При этом такая разметка не отображается напрямую на странице. Сначала она превращается в тот самый виртуальный DOM, а затем уже отображается в нужном месте страницы.

2.6 NodeJS

Node или Node.js -- программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи NW.js, AppJS или Electron для Linux, Windows и Mac OS) и даже программировать микроконтроллеры (например, tessel и espruino). В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом.

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

2.7 NPM

NPM - это пакетный менеджер для NodeJS. Множество людей по всему миру могут писать свои скрипты на JavaScript для NodeJS, оформляя их в модули и публикую в общем каталоге, откуда другие пользователи могут их установить. Это то же, что и менеджеры пакетов в Unix.

Фреймворк веб-приложений Express - как раз один из модулей npm. Так же как и React.

Вообще, NodeJS и NPM - это современная кузница для веб-разработчиков. Сейчас ей пользуются почти все frontend-разработчики (это те, кто разрабатывают интерфейсы, в данном случае для веб-сайтов и веб-приложений). Это стандарт де-факто.

Существует много вариантов для сборки проектов, их оптимизации.

В этой работе используется модуль WebPack для сборки всех скриптов и стилей в отдельные общие файлы.

2.8 Yandex SpeechKit

Yandex.SpeechKit -- технология распознавания речи и синтеза речи от российской компании Яндекс. Была выбрана в качестве инструмента для распознавания речи.

Голосовая активация

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

Выделение смысловых объектов

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

Использование в данном дипломном проекте:

Пользователь «Ежедневника» нажимает кнопку, которая запускает скрипт от «Яндекса», скрипт записывает голос, отправляет его на свой сервер на анализ и возвращает в браузер строку с результатом - то, что пользователь сказал. В строке выполняется поиск команды и, если таковая найдена, то она исполняется.

В этом проекте реализовано несколько команд. Ниже приведен их список:

- Добавить задачу (возможно проговорить время)

- Удалить задачи на текущий день

- Удалить выполненные задачи

- Удалить задачи за все предыдущие дни

- Удалить все задачи

3. Файловая структура проекта и сборка

Это файловый менеджер IDE WebStorm. Здесь отображена файловая структура всего проекта.

Вся клиентская часть располагается в каталогах «src» и «public». При этом в «public» хранится собранная версия - то есть то, что при необходимости нужно будет загрузить на сервер, чтобы пользователи могли обращаться к приложению во Всемирной Паутине. В папке «src» - несобранная версия клиентской части. Здесь можно увидеть много JS и JSX файлов, которые при сборке объединятся в один в файл - «bundle.js», и несколько SCSS - файлов, которые будут собраны затем в один файл - «style.css». За все это отвечает NPM-модуль «WebPack».

Вся серверная часть приложения - это файл «server.js». Он предоставляет необходимый функционал. Отдает статичные файлы клиентской части приложения (HTML-файлы разметки, CSS-стили, скрипты), отвечает на AJAX-запросы клиента, такие как «получить список задач», «добавить задачу», «удалить задачу». При этом внося изменения в базу данных MySQL.

Достаточно написать в консоли (перейдя в каталог с проектом):

«node server.js»,

чтобы скрипт запустился (сервер базы данных MySQL уже должен работать). Скрипт является одновременно и статическим веб-сервером, который отдает файлы по запросу браузера, и веб-API для клиентской части, то есть отвечает на запросы AJAX-запросы браузера, возвращая ему данные, которые в свою очередь запрашивает у MySQL-сервера.

Запись говорит о том, что сервер запущен и прослушивает соединение на порту 3000, и что соединение с базой данных успешно установлено.

Итак, сервер запущен. Теперь переходим к клиентской части. Чтобы собрать воедино весь интерфейс используется сборщик «WebPack». Можно считать, что это консольное JavaScript - приложение.



Ключ -w в команде запуска говорит о том, чтобы «Webpack» следил за изменениями во всех файлах, участвующих в сборке, и при изменении в любом из них проект будет пересобран. На скриншоте можно увидеть, что были созданы всего два файла - «bundle.js» - это все скрипты (в частности, библиотека React тоже будет там), а все стили - в «style.css».

4. Описание интерфейса

После того, как серверная часть приложения запущена, а клиентская часть собрана, можно запустить само приложение. Если проект запущен на локальном компьютере (как на изображении), то в браузере нужно перейти по адресу http://localhost:3000. Клиент автоматически будет перенаправлен на страницу авторизации. Она выглядит вот так.

Пользователь должен ввести свой логин и пароль, после чего нажать «Submit» или клавишу «Enter» на клавиатуре. Если комбинация логин/пароль верна, клиентская сессия будет установлена и пользователь окажется на главной странице приложения:



Так будет выглядеть главный экран приложения.

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

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

При наведении мышью на элементы списка у соответствующих элементов справа появляются кнопки «Удалить» и «Редактировать». Если нажать «Редактировать» (иконка карандаша), то на месте выбранной задачи появится форма для ее редактирования:



В этой форме доступны две функциональные кнопки - «Отмена» и «Сохранить».

Ниже, под таблицей со списком задач, располагается форма для добавления нового элемента в список. При корректно заполненных полях и нажатой кнопке «Отправить» элемент будет добавлен в список на текущий день, выбранный в календаре.

Справа от списка задач располагается дополнительная панель управления. На ней доступны кнопки «Выход» (при нажатии происходит завершение авторизованной сессии пользователя, и посетитель перенаправляется на страницу аутентификации), «Удалить выполненные» (запускает функцию удаления выполненных задач за все календарные дни), «Удалить просроченные» (удаляются задачи за все дни, предшествующие выбранному в календаре, текущему дню), «Удалить задачи на этот день» (будут удалены все задачи на текущий день, как выполненные, так и невыполненные), «Удалить все» (будут удалены абсолютно все задачи за все дни).

Ниже располагается кнопка экспорт. После нажатия на эту кнопку пользователь будет перенаправлен на отдельную страницу экспорта. Там будут доступны всего две кнопки:



При нажатии на первую - пользователь будет возвращен на главную страницу приложения. На вторую - будет выполнен запрос к серверу, после чего скомпонован файл с расширением.csi (используется для хранения и переноса данных календаря), содержащий список всех задач для текущего пользователя. Этот список можно будет успешно импортировать в такие приложения, как Microsoft Outlook, Google Calendar и т.д.

На главном экране приложения, под кнопкой «Экспорт» располагается кнопка, инициализирующая функцию голосового управления:

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

Пользователю доступны следующие голосовые команды:

«Добавить задачу»

«Удалить выполненные задачи»

«Удалить все задачи»

«Удалить задачи на этот день»

«Удалить задачи до этого дня»

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

При успешном выполнении какого-либо действия, например при добавлении задачи, при редактировании, удалении либо изменении состояния (выполнено / не выполнено) в правом нижнем углу появляются всплывающие сообщения. Это сделано для «обратно связи», чтобы пользователь мог видеть, какие изменения он вносит в приложение:



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

При изменении месяца в календаре - происходит загрузка списка дней, в которых есть хотя бы одна задача. И каждый такой день подсвечивается светло-голубым цветом. Эта информация также обновляется при изменении списка задач на текущий день.

Также стоит отметить, что при изменении размеров окна браузера изменяется ширина таблицы со списком задач. Но при уменьшении, когда достигается минимальная допустимая ширина (400 пикселей, это указано в файле стилей), изменение ширины прекращается, и появляется горизонтальная полоса прокрутки. Так что макет страницы не «сломается» даже на маленьких экранах.



5. Описание архитектуры приложения

5.1 Серверная часть и запросы

Приложение состоит из двух основных частей - клиентской и серверной части.

Серверная часть содержит всего лишь один скрипт, написанный на JavaScript и выполняемый на платформе NodeJS, и систему управления базами данных MySQL, к которой этот скрипт обращается при необходимости.

Скрипт, реализующий серверную часть приложения, предоставляет API для обращения к нему по протоколу HTTP. Он никак не зависит и не привязан к клиентской части и просто принимает GET и POST запросы и отвечает на них.

Например, клиент хочет получить список задач на конкретный день. Для этого браузер должен будет отправить POST-запрос по адресу «/todos/get». Адрес указывается относительно корневой точки приложения. Т.е., полный адрес в таком случае может выглядеть так: http://localhost:3000/todos/get

В теле этого запроса должна содержаться дата, за которую клиент хочет получить список задач.



Вот так в «Инструментах разработчика» Chrome выглядит этот запрос. Он подсвечен в списке серым цветом и называется «get». Справа, в категории «General» увидеть адрес запроса - «Request URL», метод - «POST» и код статуса ответа - «200 OK» (это означает, что запрос был успешно обработан сервером и был возвращен ответ).

Ниже, в категории «Request Payload» можно увидеть тело запроса, в котором, в данном конкретном примере, содержится полная дата дня, за который клиент хочет получить список задач.

Если переключиться на вкладку «Response», то можно увидеть ответ от сервера, который представлен в формате JSON:

В теле ответа от сервера в данном случае находится JavaScript-массив, содержащий в себе объекты. Каждый объект описывает ровно одну задачу из списка дел. В этом примере она всего одна.

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

Серверный скрипт написан на JavaScript, также использовался фреймворк Express, который предоставляет более высокоуровневые функции для создания веб-сервисов.

В данном проекте вся серверная часть находится в одном файле - «server.js». Он выполняет как функцию простого веб-сервера - выполняет отдачу клиенту статических файлов, таких как файлы стилей, скриптов и изображений, так и функцию небольшого веб-API сервера. Также в этом файле описано взаимодействие с базой данных MySQL.

function sentTODOS(req, res) {

var date = moment(req.body.date);

var q = 'select id, name, time, done, DATE_FORMAT(date, "%Y-%m-%d") AS date from todos WHERE user_id = ' + req.user.user_id +

' and date = "' + date.format("YYYY-MM-DD") + '";';

connection.query(q, function(err, rows, fields) {

if (!err)

res.json(rows);

else

console.log('Error while performing READ Query.');

});

app.post('/todos/get', sentTODOS);

Листинг 6.1.1. Пример обработки запроса сервером

Выше показан код сервера, отвечающий за обработку запроса на получение списка задач на текущий день.

Переменная «req» содержит всю информацию о входящем запросе, а переменная «res» - об создаваемом ответе. В функции «sentTODOS», в первой строке, считывается из тела запроса значение даты в переменную «date», затем составляется и выполняется запрос к базе данных для получения списка задач на текущий день. Затем, если при выполнении запросы не было ошибок, клиенту отправляется ответ («res.json(rows)»), который содержит все результаты запроса, которые вернула СУБД MySQL, в виде JavaScript-массива.

В последней строке этого листинга можно увидеть, что функция «sentTODOS» назначается на обработку POST-запроса по адресу «/todos/get».

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

На большинство запросов в этом проекте сервер отвечает всего одной строкой - «OK». За исключением двух или трех. Один из них - получение списка задач - был рассмотрен выше. Например, когда сервер получает запрос на удаление элемента - он выполняет соответствующие манипуляции с базой данных, а затем возвращает клиенту «OK». Также с изменением существующий элементов и добавлением новых. Конечно, клиенту нужно как-то узнать, успешно были внесены изменения или нет, и отобразить эти изменения в браузере. Поэтому в данном приложении после каждого запроса на изменение, удаление или добавление данных клиент посылает еще один запрос - на получение списка задач на текущий день. Это можно увидеть на скриншоте ниже:



На изображении видно, что сразу после запроса «add», который в итоге должен добавить новую строку в базу данных, был выполнен запрос «get» для получения актуального списка задач на текущий день.

На запрос «add» был получен вот такой ответ:

А на запрос «get» вот такой:

Также, в списке можно заметить запрос с именем «active». Он был создан, чтобы получить список дней в календаре, в которых есть хоть одна задача, и чтобы подсветить эти дни «светло-голубым» цветом.

Этот запрос, как и запрос «get», выполняется каждый раз при изменении, добавлении или удалении данных. А также при изменении текущего месяца или текущей даты в календаре.

Для того, чтобы запустить сервер, в консоли нужно перейти в папку с приложением и запустить NodeJS командой «node server.js» (для этого NodeJS должен быть установлен). Сервер запустится и начнет прослушивать указанный порт для подключения клиентов.

Полный код серверной части можно посмотреть в приложении. Здесь будут рассмотрены только основные аспекты работы скрипта.

В самом начале скрипта подключаются необходимые модули:

var fs = require('fs');

var path = require('path');

var url = require('url');

var express = require('express');

var bodyParser = require('body-parser');

var passport = require('passport');

var Strategy = require('passport-local').Strategy;

var ensureLogin = require('connect-ensure-login');

var ICS = require('ics-js');

var moment = require('moment');

var app = express();

Листинг 6.1.2

Далее создается подключение к базе данных:

var mysql = require('mysql');

var connection = mysql.createConnection({

host: 'localhost',

user: 'root',

password: '123',

database: 'todolist',

charset: 'UTF8_UNICODE_CI'

});

Листинг 6.1.3

В коде ниже создается стратегия для авторизации пользователя:

passport.use(new Strategy(

function(username, password, cb) {

connection.query('SELECT * FROM user WHERE name = "' + username + '";', function(err, rows) {

var user = rows[0];

if (err) { return cb(err); }

if (!user) { return cb(null, false); }

if (user.pass != password) { return cb(null, false); }

return cb(null, user);

});

})

);

Листинг 6.1.4

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

«Passport» - это публичный модуль авторизации для JavaScript, который можно установить при помощи пакетного менеджера NPM.

В трех строках кода ниже пути для статических ресурсов приложения (стилей, скриптов, шрифтов). Когда браузер будет обращаться к файлам по адресу «/styles» или «/scripts» он будет автоматически перенаправлен для их получения в соответствующие директории в каталоге «public», который в данном проекте используется для хранения файлов собранного приложения.

app.use('/styles', express.static(path.join(__dirname, 'public/styles')));

app.use('/scripts', express.static(path.join(__dirname, 'public/scripts')));

app.use('/fonts', express.static(path.join(__dirname, 'public/fonts')));

Листинг 6.1.5

В коде ниже задаются разрешенные адреса для данного приложения. Также указывается дополнительный параметр «restricted». Если он установлен как «true», то для запросов по данному адресу нужна авторизация:

var siteUrls = [

{pattern:'^/login/?$', restricted: false},

{pattern:'^/$', restricted: true},

{pattern:'^/todos/\\w+/?$', restricted: true},

{pattern:'^/todos/delete/\\w+/?$', restricted: true},

{pattern:'^/todos/get/\\w+/?$', restricted: true},

{pattern:'^/days/get/\\w+/?$', restricted: true},

{pattern:'^/scripts/[\\w+.]*?$', restricted: true},

{pattern:'^/logout/?$', restricted: true}

];

Листинг 6.1.6

Еще один важный участок кода. Он ограничивает доступ к определенным страницам приложения, если пользователь не авторизован, использую массив «siteUrls», рассмотренный ранее:

function authorizeUrls(urls) {

function authorize(req, res, next) {

var requestedUrl = url.parse(req.url).pathname;

for (var ui in urls) {

var pattern = urls[ui].pattern;

var restricted = urls[ui].restricted;

if (requestedUrl.match(pattern)) {

if (restricted) {

if (req.isAuthenticated()) {

// если все хорошо, просто переходим к следующим правилам

next();

return;

}

else{

// пользователь не авторизирован, отправляем его на страницу логина

res.writeHead(303, {'Location': '/login'});

res.end();

return;

}

}

else {

next();

return;

}

}

}

// сюда мы попадаем, только если в цикле не нашлось совпадений

console.log('common 404 for ', req.url);

res.end('404: there is no ' + req.url + ' here');

}

return authorize;

}

app.use('/', authorizeUrls(siteUrls));

Листинг 6.1.7

Цикл проходит по каждому адресу из списка разрешенных, и, если встречается совпадение, значит пользователь ввел корректный адрес. Тогда скрипт проверяет, нужна ли авторизация для доступа по данному адресу. Если нужна и пользователь не авторизован, то он будет перенаправлен на страницу авторизации. Если он уже авторизован, то работа скрипта будет продолжена. Если же запрашиваемого адреса нет в списке разрешенных адресов, то клиенту будет возвращено сообщение об ошибке с кодом 404.

Далее основную часть скрипта составляет обработка различных запросов от клиента. Один из которых был рассмотрен ранее. Все остальные работают по такому же принципу.

В конце скрипта - две строки, для запуска прослушивания по заданному порту и для вывода информации о сервере в консоль:

app.listen(3000);

console.log("Express server listening on port %d in %s mode", app.get('port'), app.settings.env);

Листинг 6.1.8

5.2 Клиентская часть

Весь исходный код клиентской части приложения располагается в директории «src» в корневом каталоге проекта. В ней расположены каталоги «styles» и «scripts», которые содержат, соответственно, все написанные для этого проекта стили и скрипты. Также в каталоге «src» находится файл «app.js», который является корневой точкой входа для сборки приложения (когда все скрипты собираются в один файл при сборке проекта).

Вот так выглядит файловая структура клиентской части приложения в IDE WebStorm:

В каталоге «scripts» находятся файлы с расширениями «.js» и «.jsx». Принципиальной разницы в расширениях нет, все файлы могли бы быть с расширением «.js». Но для порядка они разделяются по содержанию. В файлах с расширением «.jsx» находится описание видимых компонентов интерфейса. Например файл «TodoList.jsx» является главным среди них. Он содержит описание интерфейса всего приложения «Список дел» и используется внутри себя другие компоненты, такие как «TodoListItem» (отдельный элемент списка задач), импортируя соответствующие «.jsx» файлы с описанием компонентов интерфейса.

В файлах с расширением «.js» описаны абстракции, которые не влияют прямо на отображение приложение, но отвечают за хранение, обработку и пересылку данных.

Для написания клиентской части была использована библиотека React в сочетании с концепцией хранения данных Redux.

Так же как в приложении серверную часть можно логически и физически отделить от клиентской, примерно так же и внутри клиентской части происходит разделение кода и логики на «хранилище данных» и «отображение данных и взаимодействие с пользователем». «Хранилище данных» - это Redux-код. «Отображение и взаимодействие» - за это отвечает React.

Загрузка данных с сервера, их сохранение а также обеспечение к ним доступа описано в файле «TodoStore.js». В нем описано так называемой «хранилище». Это хранилище затем подключается во входной точке приложение - в файле «app.js». Вот как это выглядит:

import TodoList from './scripts/TodoList';

import TodoStore from './scripts/TodoStore';

import ReactDOM from 'react-dom';

import React from 'react';

import 'styles/main';

const render = () => {

ReactDOM.render(

<TodoList store={TodoStore} />,

document.getElementById("toDoListApp")

);

};

TodoStore.subscribe(render);

render();

Листинг 6.2.1 Файл app.js

Можно считать, что это инициализирующий файл. Он подключает описание главного компонента приложения - модуль «TodoList» из каталога «/scripts». При этом будет подключен файл «TodoList.jsx». Расширение при таком подключении можно не указывать. Также подключается модуль с хранилищем данных - «TodoStore». Далее подключается библиотека React и стили.

Затем объявляется функция «render», которая отвечает за запуск отрисовки приложения на экране. Метод «ReactDom.render()» принимает два параметра - элемент, который должен быть отображен (в данном случае - это главный компонент приложения - «TodoList», и DOM-узел дерева HTML-документа, в котором компонент должен быть выведен).

В строке «TodoStore.subscribe(render)» происходит привязка функции «render» к изменениям в хранилище данных. Т.е. когда состояние данных в хранилище изменится, функция «render» будет автоматически вызвана, чтобы заново «отрисовать» компонент приложения.

Стоит пояснить, что такое React-компонент. React-компонент - это отдельный элемент интерфейса приложения, например «список задач», «элемент списка задач» или просто «кнопка». Каждый React-компонент должен иметь метод «render», который будет вызван для отображения этого компонента на странице. Один React-компонент может вызывать и отображать другие компоненты, что позволяет строить эффективную иерархию приложения.

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

Например, элемент списка задач - это отдельный компонент, который описан в отдельном файле «TodoListItem.jsx». Форма добавления новой задачи - тоже отдельный React-компонент, который описан в файле «TodoListAdd.jsx».

В компоненте «TodoList» отрисовывается все приложение. Функция «render» получилась довольно громоздкой. Также в этом компоненте описаны почти все методы для взаимодействия с пользователем и с хранилищем данных для всего приложения. Поэтому компонент получился большой.

В функции «render» каждого React-компонента сначала может выполняться какая-то логика по вычислению того, что должно быть отображено в документе. Затем в операторе «return» должен быть возвращен React-элемент либо JSX-разметка, которая все равно будет преобразована в React-элемент при сборке. Пример:

render: function() {

return (

<div>Простой пример</div>

);

}

Листинг 6.2.2

Такой код выглядит как простой HTML внутри JavaScript. Такого по умолчанию в обычном JavaScript быть не может. Этот код на этапе компиляции и сборки будет преобразован вот в такой:

render: function render() {

return React.createElement("div", null, "Простой пример");

}

Листинг 6.2.3

Т.е. на самом деле это обычный JavaScript. Такой код будет исполнять браузер. Но для удобства написания и для наглядности кода была разработана JSX-разметка, которая позволяет «как бы» использовать HTML-теги внутри JavaScript. Это одна из главных и удобных возможностей React.

Точно так же, как можно использовать HTML-теги, можно вставлять и другие компоненты React в виде HTML-тегов, как это было видно в файле app.js.

Итак, все что отображается в приложении - описано в модуле «TodoList» или вызывается из него. Сам он подключается и используется в корневом файле приложения - файле «app.js». Но этот файл отвечает только за инициализацию и прямого отношения к интерфейсу приложения не имеет.

Полный код модуля «TodoList» можно увидеть в приложении.

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

Далее идет объявление класса данного React-компонента и описание конструктора для этого класса:

class TodoList extends React.Component {

constructor(props) {

super(props);

this.store = this.props.store;

this.state = {editableItemID: null};

this.state = {messageToShow: "", messageTimer: null};

this.state = {activeDays: []};

}

Листинг 6.2.4

Класс «TodoList» наследуется от базового класса React.Component. В конструкторе вызывается родительский конструктор со всеми параметрами.

В фале «app.js» можно было увидеть, что в компонент «TodoList» передается свойство «store», содержащее ссылку на хранилище данных. Для того, чтобы компонент мог взаимодействовать с хранилищем. Все свойства, которые передаются React-компоненту в виде «<ReactComponent value1={value1} value2={value2} />» будут доступны внутри этого компонента через объект «props».

В строке « this.store = this.props.store; » происходит присвоение этого свойства внутренней переменной компонента, чтобы каждый раз не обращаться к свойству «props».

Ниже происходит установка «state» - начальное состояние React-компонента. У каждого React-компонента есть состояние. Как только это состояние изменяется, например при манипуляциях пользователя, компонент будет перерисован. Т.е. будет вызван метод «render» для данного React-компонента. Т.е. в объекте «state» должны храниться данные, которые должны менять в ходе использования приложения, и от которых зависит отображение этого компонента на экране.

5.3 Работа хранилища

Работа хранилища данных этого приложение описана в файле «TodoStore.js». Оно отвечает за получение, хранение и изменение данных, а также за информирование функций, которые подписаны на хранилище, об изменении данных.

В файле «app.js» можно было увидеть строку «TodoStore.subscribe(render);» которая означает, что функция «render()» будет вызвана каждый раз при изменении состояния данных в хранилище.

Хранилище состоит из «редьюсеров» (от англ. reduce - сокращать). Эту JavaScript-функции, которые обрабатывают определенный тип данных. На вход они получают «state» - текущее состояние данных (например, какой-либо объект или массив с данными) и «action» - действие, которое должно быть с этим состоянием выполнено (например, для списка задач - добавить элемент, загрузить элементы с сервера, изменить либо удалить элемент). На выходе функция возвращает новое состояние - то есть новая версия данных, которая была получена из исходных данных путем совершения действия.

Здесь кроется принципиальная тонкость. Redux не изменяет входные данные, он создает новую их копию каждый раз с учетом вносимых изменений, и возвращает новую порцию данных.

То есть хранилище работает по принципу так называемых «чистых функций». Каждый «редьюсер» работает над своим типом данных (в данном проекте их в хранилище всего два - «список дел» и «текущая дата»). Он получает на вход текущее состояние и действие, которое нужно совершить и возвращает новое состояние.

Несколько «редьюсеров» объединяются вместе при помощи функции «combineReducers()», а затем на основе их создается хранилище:

const todoApp = combineReducers({

todos: todosReducer,

date: dateReducer

});

const store = createStore(todoApp);

Листинг 6.3.1

Ниже приведен код «редьюсера» для текущей даты. Текущая дата - это день, который выбран в календаре приложения.

const dateReducer = (state = new Date(), action) => {

switch (action.type) {

case "DATE_NEXT_DAY":

return new Date(state.setDate(state.getDate() + 1));

case "DATE_SET":

return new Date(action.date);

case "DATE_SET_MONTH":

return new Date(state.setMonth(action.month));

default:

return state;

}

}

Листинг 6.3.2

Код небольшой, в отличие от кода «редьюсера» для списка дел. Из кода видно, что в функцию передается состояние «state» (также указывается значение по умолчанию для изначального состояния - новый объект «Date», который при создании будет указывать на «сегодняшний день»), и переменная «action» которая содержит команду (что нужно сделать с данными). Ниже можно увидеть блок «switch», который в зависимости от команды выполняет манипуляции с данными и возвращает полученное значение.

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

const todosReducer = (state = [], action) => {

switch (action.type) {

case 'TODOS_LOAD':

fetch('/todos/get', {

credentials: 'same-origin',

method: 'POST',

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json'

},

body: JSON.stringify({date: action.date})

})

.then((response) => {

return response.json();

})

.then((data) => {

store.dispatch({

type: 'TODOS_LOADED',

data: data

});

})

.catch(alert);

return state;

case 'TODOS_LOADED':

return action.data;

case 'TODOS_ADD':

fetch('/todos/add', {

method: 'POST',

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json'

},

credentials: 'same-origin',

body: JSON.stringify(action.newItem)

})

.catch(alert);

return state;

Листинг 6.3.3

Хранилище уведомляет функции, подписанные на него, об изменении данных. Приложение всегда может сообщить хранилищу, что нужно изменить данные. Для этого используется функция «store.dispatch()»:

store.dispatch({

type: 'TODOS_LOADED',

data: data

});

Листинг 6.3.4

Так инициируется изменение данных в хранилище. «type» - это команда, действие над данными, которое необходимо выполнить. Все остальные свойства, в данном примере - «data» - это данные, необходимые для внесения изменений. В примере с действием «TODOS_LOADED» - это массив списка дел.

Дело в том, что с загрузкой данных в хранилище связано два действия - «TODOS_LOAD» и «TODOS_LOADED». Из приложения вызывается только одно - «TODOS_LOAD» - так приложение уведомляет хранилище, что требуется загрузить с сервера список дел «по-новой». Хранилище создает асинхронный запрос (это значит, что приложения продолжит свою работу в обычном режиме до тех пор, пока не придет ответ, а не будет приостановлено для ожидания). Когда придет ответ - неизвестно. Поэтому в callback-функции (функция, которая выполнится, когда придет ответ от сервера) вызывается метод «store.dispatch» с действием «TODOS_LOADED». То есть хранилище само себя уведомляет о том, что данные были загружены.

Из листинга 6.3.3 видно, что при выполнении действия «TODOS_LOADED» почти ничего не происходит, кроме возвращения массива с полученным от сервера списком дел. Так сделано для того, чтобы приложение было уведомлено о том, что данные получены. Функции, которые подписаны на хранилище, получают уведомления только после выполнения определенного «действия». После выполнения действия «TODOS_LOAD» приложение получит уведомление, что действие совершено. Но на самом деле данные пока не изменились, т.к. ответ от сервера только ожидается. По этой причине и было введено дополнительное действие, чтобы сообщить приложению точно, что актуальные данные были получены.

Для взаимодействия приложения с хранилищем используется дополнительный файл - «TodoStoreActions.js». В нем описаны функции вида:

export function todosDelete(id) {

return {

type: 'TODOS_DELETE',

...