1 Цели и задачи разрабатываемого программного продукта
1.1 Назначение и область применения
Так как данная программа является блокнотом в онлайн формате, то область применения для этого разрабатываемого продукта может быть любая область, в которой нужно оставлять заметки или делать какие-то записи.
Область применения разрабатываемого продукта может как наука, так и журналистика, как мода, так и стилистика.
То есть данный разрабатываемый продукт можно использовать практически везде.
Назначение разрабатываемого продукта состоит в том, что пользователи могут оставлять заметки в интернете, тем самым не засоряя память на устройстве. То есть при работе с этим разрабатываемым проектом не нужно ничего устанавливать, эта программа будет доступна всем, у кого имеется любой браузер.
Также разрабатываемый продукт предназначен для закрепления или улучшения навыка программирования на языках HTML – язык гипертекстовой разметки, CSS – таблица каскадных стилей, JavaScript – мультипарадигменный, высокоуровневый язык программирования, ориентированный на веб-индустрию, а также DOM API – независимый интерфейс программирования веб-приложений. Программа может запускаться на следующих устройствах: Android (Все версии), Windows (Все версии). На IOS-подобных устройствах данный разрабатываемый продукт не поддерживается.
1.2 Постановка задачи
Создать веб-версии блокнота используя следующий стек технологий:
1. HTML
2. CSS – препроцессор SCSS
3. JavaScript с использованием независимого интерфейса программирования DOM API
Для работы с этих стеком достаточно установить любой браузер и интегрированную среду разработки. В разработке данной программы использовались самые последние версии языков программирования.
В этом веб-приложении должны быть основные методы работы с файлами, то есть сохранения, создание, редактирование, удаление и скачивание файлов. Также есть необходимость разработать пользовательский, простой, интерфейс для взаимодействия пользователя с программой.
Главной особенностью данного разрабатываемого продукта является в локальном хранилище, то есть необходимо подключить к локальному хранилищу, практически является базой данных и работает быстро.
Но основная цель данного разрабатываемого продукта – удобное, простое использование программы с очень приятным и понятным интерфейсом. В таблице 1 изображена структура кода.
Таблица 1. Структура кода программы
Обозначение Тип данных Ограничения Размер Описание
newFileButton DOMElement newFileButton !== null Путь к кнопке
Files Array[DOMElements] Files !== null Список файлов
Counter Integer Counter >= 0 4 байта Айди нового файла
fileId Integer fileId >= 0 || fileId == -1 4 байта Айди фокусированного файла
File.text String File.text.length >= 0 1 байт * длину строки Текст определенного файла
Touch Boolean Touch == 1 || touch == 0 2 бта Определение тача
File Blob Blob !== null Неограниченно Создание файла скачки
1.3 Описание алгоритма
В этом разделе будет описана и продемонстрирована работа алгоритма. Начнем с описания алгоритма. Перед описанием самого алгоритма нужно узнать, что же такое алгоритм.
Алгоритм – это всего лишь пошаговые действия решения задач.[2] Для представления алгоритма существует 4 основных вида представления:
1. Блок-схемы
2. Псевдокод
3. Словесное
4. Формальный алгоритмический язык
В данной работе будет использованы два вида представления - словесное и блок-схема. Как можно понять по названию, словесное представление – это просто объяснения главной задачи алгоритма простым языком, который понимает любой человек. А блок-схема записывается специальными графическими блоками, которые имеют свое обозначение.
Перед представлении алгоритма в виде блок-схемы, нам необходимо выяснить главный функционал данного алгоритма, поэтому ниже будет представлен, словесно, алгоритм разрабатываемого продукта.
Алгоритм разрабатываемого продукта следующий:
Первым делом необходимо получить доступ к локальному хранилище для дальнейшей работы с ним. После того, как мы получили доступ к самому хранилищу, нам необходимо проверить на наличие уже ранее созданных файлов, если такие файлы существуют, то переходим на следующий этап – Рендеринг ранее созданных элементов, если нету, то переходим на следующий этап – Создание двух тестовых файлов и рендеринг всех элементов хранилища
Этап Рендеринг:
Это этап алгоритма, где мы берем все уже ранее созданные файлы и просто отображаем на странице по списком файлов
Этап Создание двух текстовых файлов и рендеринг всех элементов хранилища:
Это этап алгоритма, где создается два тестовых файла, один из которых является просто файлом с текстом, и второй является файл с Markdown форматом текста. После создания отображаем файлы с хранилища, это всегда будет только два элемента.
После прохождения одного из этих этапов выполняется шаг, в котором происходит инициализация переменных, создание функций, установка логики между элементами. Самый последний этап алгоритма – это установка связи между событием элемента или элемента с какой-либо функции.
Но на этом алгоритм не прекращает работу, так как последний этап алгоритма закончится только тогда, когда пользователь покинет программу, этот этап алгоритма следит за любыми изменениями в программе, если что-то изменится (изменится заголовок файла/содержания или удалится/добавится файл), то алгоритм сразу переходит на этап – Рендеринг. Хоть в списке не останется файлов, алгоритм все равно будет переходить на этап – Рендеринг. На рисунке 1, который находится ниже, вы можете увидеть алгоритм, представленный, в виде блок-схемы.
