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

Конечно, в интернете можно найти множество уже давно работающих всевозможных планировщиков, календарей с напоминаниями, органайзеров и task-менеджеров. Требуется, чтобы пользователь мог быстро добавить записи в список, не тратя на это больше своего времени, чем если бы он делал записи в обычный блокнот. К тому же, такое интернет-приложение не требует установки на компьютере клиента и, если обеспечить к нему публичный доступ в интернете, будет доступно из любой точки мира, в которой есть возможность выхода в интернет. Технологии, которые были использованы при разработке: Для клиентской части приложения это - HTML, CSS и JAVASCRIPT. Состояния приложения - это все динамические данные, которые меняются в процессе пользования приложением, в данном случае - это список дел с их параметрами (датой, названием задачи, временем и т.д.).В данном дипломном проекте стояла задача реализовать веб-приложение «Ежедневник» с функцией голосового управления. Также программное обеспечение должно удовлетворять следующим критериям и реализовывать следующие возможности: - Получение списка дел Добавление новых элементов и удаление старых Опциональная возможность задать время для каждой задачи Возможность отмечать задачи как выполненные или невыполненныеРазработчики создают HTML-разметку, браузер получает такую разметку, обрабатывает ее и отображает полученные результаты на экране. Для управления отображением используются HTML-теги, внутри которых могут располагаться текстовые узлы, или другие теги, или не могут. Текст, который находится между и , браузер должен отобразить с повышенной жирностью. и - открывающий и закрывающий теги соответственно. На раннем этапе развития различные браузеры были не согласованы друг с другом, поддерживали различные стандарты, внедряли свои собственные наборы элементов, что приводило к путанице. Сейчас популярность набирают браузеры, которые следуют стандартам W3C (Mozilla Firefox, Google Chrome, Opera, Safari).Если HTML используется для описания структуры документа, то CSS отвечает за внешний вид. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.Document Object Model - «объектная модель документа») - это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. React использует виртуальный DOM, то есть, если проще, то это еще одна копия всего HTML-документа в памяти. Поэтому все изменения сначала отображается в виртуальном DOM, он сравнивается с предыдущей версией, и если есть изменения, то они вносятся в настоящее дерево элементов. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи NW.js, APPJS или Electron для Linux, Windows и Mac OS) и даже программировать микроконтроллеры (например, tessel и espruino).Вся клиентская часть располагается в каталогах «src» и «public». При этом в «public» хранится собранная версия - то есть то, что при необходимости нужно будет загрузить на сервер, чтобы пользователи могли обращаться к приложению во Всемирной Паутине. Здесь можно увидеть много JS и JSX файлов, которые при сборке объединятся в один в файл - «bundle.js», и несколько SCSS - файлов, которые будут собраны затем в один файл - «style.css». Отдает статичные файлы клиентской части приложения (HTML-файлы разметки, CSS-стили, скрипты), отвечает на AJAX-запросы клиента, такие как «получить список задач», «добавить задачу», «удалить задачу». Скрипт является одновременно и статическим веб-сервером, который отдает файлы по запросу браузера, и веб-API для клиентской части, то есть отвечает на запросы AJAX-запросы браузера, возвращая ему данные, которые в свою очередь запрашивает у MYSQL-сервера.

Содержание

Введение

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 Кратко о взаимодействии компонентов

Заключение

Список использованных источников

Приложение