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



Содержание

• Введение
• 1. Аналитический обзор предметной области
• 1.1 Классификация сайтов
• 1.2 Классификация интернет-магазинов
• 2. Аналитический обзор аналогов
• 2.1 Интернет-магазин «pocketbook»
• 2.2 Интернет-магазин «readerone»
• 3. Определение иструментов разработки
• 4. Постановка задачи вкр
• 5. Разработка структуры интернет-магазина
• 6. Разработка обобщенного алгоритма
• 7. Разработка блок-схем алгоритмов отдельных процедур
• 8. Разработка пользовательского интерфейса
• 9. Разработка программного обеспечения
• 10. Тестирование
• 11. Разработка методических указаний
• Заключение
• Список используемой литературы
• Приложени

Введение

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

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

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

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

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

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

В-третьих, чтение с экрана телефона или монитора приводит к скорейшему ухудшению зрения, чем при чтении с электронной книги.

Именно эти доводы и подтверждают актуальность темы.

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

Что требуется для достижения этой цели:

- изучить предметную область;

- найти аналоги, занимающиеся данным видом деятельности, и выявить у них все положительные и отрицательные стороны;

- описать или предположить на первоначальном этапе примерный алгоритм работы магазина и его основной функционал;

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

- реализовать пользовательский интерфейс и соответствующий функционал;

- тестирование сайта на обнаружение ошибок;

- составление документации, так называемой инструкций пользователю.

В данной выпускной квалификационной работе было выполнено следующее:

- проведен анализ предметной области;

- выявлены требования для интернет-магазина;

- представлены аналоги для сравнения;

- выбраны соответствующие инструменты для разработки;

- разработана структура интернет-магазина в целом;

- разработан обобщенный алгоритм;

- сделаны блок-схем алгоритмов отдельных процедур;

- разработан пользовательский интерфейс;

- проведено тестирование интернет-магазина;

- разработаны методические указания для пользователя.

1. Аналитический обзор предметной области

1.1 Классификация сайтов

алгоритм интернет магазин интерфейс

Чаще всего сайты делят на следующие категории:

- сайт-визитка;

- корпоративный информационный веб-сайт;

- корпоративный имиджевый веб-сайт;

- интернет-магазин;

- информационный сайт;

- игровой портал;

- персональный проект;

- промо-сайт;

- сайт-форум;

- блог.

Вкратце опишем каждую из категорий.

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

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

Корпоративно-имиджевый сайт - предназначен чаще всего для отображения информации о компании. Чаще всего эта информация отображается в виде ленты новостей.

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

Информационный сайт - включает себя огромный поток информации различной тематики.

Игровой портал - развлекательный интерактивный проект с высокой посещаемостью и активностью.

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

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

Сайт-форум - предназначен для организации общения между собой посетителями сайта.

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

1.2 Классификация интернет-магазинов

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

В данном пункте рассмотрим подробней каждый из этих признаков:

1. Ассортимент товара

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

2. Тип продаж

Здесь всё просто и понятно. Магазины делят на оптовые, розничные и оптово-розничные.

3. Тип платформы

Интернет-магазины бывают на собственной CMS, на Open Source CMS и SaaS-платформе. О каждой теперь поподробней.

Преимущества собственной CMS:

- уникальность дизайна;

- расширение функционала.

Недостатки:

- навыки программирования;

- плата за лицензию;

- затраты времени на разработку.

Преимущества Open Source CMS:

- экономит бюджет и время;

- минимум навыков программирования.

Недостатки:

- ограниченный функционал;

- отсутствие тех. поддержки.

Преимущества SaaS-платформ:

- предлагается уже готовый сайт с функционалом и автоматическими обновлениями;

- экономия времени.

Недостатки:

- плата за аренду;

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

4. Тип работы

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

5. По структуре

Существуют следующие разделения:

- сайт-магазин;

- сайт-посредник;

- сайт-витрина.

Теперь о каждом поподробней.

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

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

- покупатель выбирает товар и оформляет заказ в интернет-магазине;

- интернет-магазин покупает этот товар у поставщика;

- интернет-магазин отправляет на обработку заказ в партнерский интернет-магазин.

Такая схема довольно распространенная, так как не требует большого количества сотрудников, склада и бюджета.

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

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

- тип сайта - интернет-магазин;

- ассортимент товара - специализирован на продаже электронных книг;

- тип продаж - оптово-розничные;

- тип платформы - собственная CMS;

- тип работы - online/offline;

- структура - сайт посредник.

2. Аналитический обзор аналогов

В современном мире без конкуренции никуда. Благодаря ей компании не стоят на месте, а развиваются, пытаясь обогнать свои оппонентов.

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

На просторах интернета было обнаружено всего два интернет-магазина специализированных только на продаже электронных книг. Первый сайт - это «PocketBook». Второй - «ReaderONE».

2.1 Интернет-магазин «PocketBook»

Сайт «PocketBook» встречает нас следующей стартовой страницей. Изображение этой страницы показано на рисунке 2.1.

Рисунок 2.1 - Стартовая страница сайта «PocketBook»

Из плюсов можно выделить следующее:

- простой и понятный интерфейс;

- оформление в светлых тонах;

- отсутствие рекламы;

- минимум лишней информации;

- поисковые фильтры;

- сайт адаптирован;

- имеется раздел «О компании».

Из минусов можно выделить следующее:

- продажа электронных книг только своего брэнда, а, следовательно, выбор невелик;

- имеется отдельный блок, который связан с новостями из мира технологий - лишнее для интернет-магазина.

2.2 Интернет-магазин «ReaderONE»

Сайт «ReaderONE» встречает нас следующей стартовой страницей. Изображение этой страницы показано на рисунке 2.2.

Рисунок 2.2 - Стартовая страница сайта «ReaderONE»

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

- светлая тема;

- мобильная версия сайта;

- расположение информации четко в отдельном блоке;

- меню.

Из минусов можно отметить:

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

- отсутствие фильтров сортировки;

- отсутствует поиск по названию;

- есть блок новостей. Это магазин, а не новостной источник.

Если заглянуть в код, то увидим какие инструменты использовались для написания этих двух магазинов. В основном это Java Script, HTML, CSS, а также элементы JQuery и PHP.

Такое решение или правильней сказать не все предложенные инструменты нам подходят, так как на сегодняшний день есть более современные и высокопроизводительные библиотеки для создания пользовательского интерфейса интернет-магазина и реализации back-end. Все инструменты, которые будут выбраны для реализации собственного интернет-магазина опишем в следующем пункте.

3. Определение иструментов разработки

Для разработки собственного интернет-магазина понадобятся следующие инструменты:

- Visual Studio Code;

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

- Yarn;

Это пакетный менеджер. С его помощью мы будем загружать нужные нам библиотеки в проект. Самый главный плюс - это его скорость. Он быстрее своего аналога под названием npm. Это единственное их отличие. Оба этих менеджера работают с одинаковыми пакетами.

- Node.JS;

Это программная платформа, превращающая JS из узкоспециализированного языка в язык общего назначения. Данный инструмент понадобится нам для подключения внешних библиотек. Кроме этого будет частично реализован back-end при помощи node.

- JavaScript;

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

- JSX;

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

- React.JS;

Это JavaScript библиотека, на которой и будет построен весь наш пользовательский интерфейс. React разрабатывается и поддерживается Facebook. Его основная цель, которую он уже достиг давно - высокая скорость, масштабируемость и простота. Также данную библиотеку легко совмещать с любыми пакетами из менеджеров пакетов, которые были описаны выше. Рендер можно производить прямо на сервере. Отлично подходит для командной разработки. Из минусов можно отметить только то, что отсутствует русскоязычная документация.

- Redux;

Это шаблон JavaScript предназначенный для управления состояниями приложения. Чаще всего его используют в связке с React. Данный инструмент оснащен параметрами, позволяющие значительно упростить передачу данных хранилища через контекст. Основные плюсы - удобство тестирования и читаемость кода. Если год не заглядывать в проект, а потом заглянуть, то понять все, что написано, не проблема и не займет много времени.

- MongoDB;

MongoDB имеет новый подход к построению баз данных, где отсутствуют таблицы, схемы, запросы SQL, внешние ключи, которые характерны объектно-реляционным базам данных. MongoDB имеет документо-ориентированную модель данных, из-за чего она работает быстрее и обладает лучшей масштабируемостью. В MongoDB применяется формат BSON. Данный формат позволяет работать с данными быстрее: быстрее выполняется поиск и обработка. Но надо отметить, что BSON в отличие от хранения данных в формате JSON имеет недостаток: данные в JSON формате занимают меньше места, чем в BSON

Кроме всех выше перечисленных инструментов мы будем использовать различные инструменты для связи и синхронизации библиотек, например, зависимость react-redux, с помощью которой можно совмещать написание кода на react и redux.

Кроме этого был подключен инструмент express, предназначенный для обработки запросов. С его помощью мы будем создавать наш API (Application Program Interface).

Также были подключены библиотеки для работы с компонентами. Это Semantic-ui-react и Ant-design. Обе включают в себя набор компонентов и примеров их использования. Причиной выбора данных библиотек стала следующая: с Ant-design уже имеется хороший опыт работы, а Semantic-ui-react кроме высоких рейтингов её используют в таких проектах как Amazon и NetFlix.

Была установлена утилита Nodemon, которая следит за всеми изменениями на сервере и перезапускает его автоматически. Таким образом исключается человеческий фактор. Перезагружать вручную сервер не потребуется во время кодирования. Запуск сервера также осуществляется данной утилитой.

Вместе с утилитой Nodemon была установлена утилита Mongoose. Она предназначена для наладки простого контакта между Node JS и MongoDB. С её помощью мы будем создавать соответствующие схемы для загрузки данных в базу данных.

Не забудем и о таком модуле как body-parser, предназначенный для парсинга тела запроса. Читать данные он будет в формате JSON.

Также нам понадобится такая функция, как Link. Она имеется в модуле под названием react-router-dom. Данная функция понадобится нам для оформления переходов с одной страницы на другую без её перезагрузки.

Предположим, что у нас в магазине имеется тысяча товаров. Ориентироваться в них без фильтров и поиска практически невозможно. Поэтому установим еще одну библиотеку под названием lodash. Она нам понадобится для сортировки массива товаров при реализации фильтров. Выбор на неё пал только из-за производительности и наличия огромного числа полезных функций. Основные её конкуренты это SugarJS и LazyJS.

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

4. Постановка задачи ВКР

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

Для начала сформулируем основные требования к собственному интернет-магазину. Как известно у каждого интернет-магазина должны быть свои определенные требования и свои определенные черты, отличающие его от конкурентов. Иначе данное веб-приложение не будет являться таковым и смысла от него никакого не будет.

Основываясь на сильных и слабых сторонах, которые были выведены у аналогов, выставим свои требования к интернет-магазину и опишем каждое из них:

- отображение товаров;

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

- подробное описание для каждого товара;

Отображение простых картинок недостаточно. Под каждый товар требуется соответствующее описание, чтобы покупатель мог поближе ознакомиться с понравившемся ему предметом. Реализовано будет при помощи дополнительных инструментов Semantic UI и Redux, так как проект имеет первоначальное хранилище.

- фильтры сортировки по цене товара, по брэнду;

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

- поиск товара по конкретному названию, а также по цене и размеру экрана;

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

- корзина товаров;

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

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

- специализирован только на продаже электронных книг;

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

- отсутствие рекламы;

Реклама является отвлекающим фактором для покупателя. Бывают ситуации, когда реклама заинтересовывает сильнее и пользователь покидает страницу магазина.

- оформление под минимализм;

Отсутствие отвлекающих факторов - залог успеха. Библиотеки Semantic UI и Ant design для этого прекрасно подходят, так как у них все компоненты оформлены без всего лишнего.

Реализовать back-end, а именно:

- сделать загрузку всей информации о товаре из соответствующей коллекции базы;

- при добавлении товара в корзину осуществлять запись данного товара в соответствующую коллекцию базы;

- по аналогии с добавлением товара в корзину сделать и удаление товара из коллекции;

В качестве базы данных выбрана MongoDB, так как она больше подходит для стека React + Redux, а в качестве реализации сервера - Node JS, который также используют при совместном React+Redux+MongoDB.

Следующее требование - безопасность.

Сайты всегда подвергаются различным атакам, вирусами и взломами. Если подобное совершится с интернет-магазином, то это всё может окончится потерей сайта, потерей репутации и потерей клиентов. Реализовать данное требование можно если не будут использованы всем известные конструкторы, такие как WordPress или uQoz. В данное работе они не будут использованы.

Реализовав все эти требования, наш проект не будет уступать аналогам, но и не будет их превосходить. Чтобы реализовать это превосходство, были как раз и выбраны в предыдущем пункте современные инструменты разработки, которые по скорости превосходят своих предшественников и конкурентов.

5. Разработка структуры интернет-магазина

Перед определением структуры для собственного интернет магазина разберемся какие вообще существуют структуры и какие лучше всего подойдут для нашего сайта.

Первая в списке, она же и одна из самых распространенных структур - линейная. Вся информация представляется в виде цепочки, переход от одной страницы к другой. В качестве примера можно привести перелистывание книг. Структура представлена на рисунке 5.1.

Рисунок 5.1 - Линейная структура сайта

Разновидность линейной - линейно-разветвленная. Последовательная цепочка переходов иногда предлагает пользователям право выбрать что-либо. Сама структура представлена на рисунке 5.2.

Рисунок 5.2 - Линейно-разветвленная структура сайта

Также можно встретить структуру дерево. Это сложная структура, которая обладает многоуровневым строением. Имеет много разделов, подразделов и ветвлений. Структура представлена на рисунке 5.3.

Рисунок 5.3 - Древовидная структура сайта

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

Рисунок 5.4 - Структура решето

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

Рисунок 5.5 - Структура разрабатываемого интернет-магазина

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

Шапка магазина кроме названия будет иметь кнопку перехода в корзину, а также суммарную стоимость товаров, которые находятся в корзине.

Под шапкой будут находится параметры поиска и различные фильтры сортировки товара.

6. Разработка обобщенного алгоритма

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

Рисунок 6.1 - Обобщенный алгоритм интернет-магазина

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

Теперь подробнее рассмотрим алгоритм со стороны разработчика.

Как уже известно, в нашем интернет-магазине будут использоваться следующие основные инструменты: React JS, Redux, Node JS, MongoDB. Для начала разберем как устроен Redux в нашем проекте и построим примерный алгоритм его работы.

Из описанного ранее мы теперь знаем, что Redux предназначен для работы с самим хранилищем. Его используют для упрощения обращения нескольких компонентов к одному хранилищу. С его помощью синхронизировать данные проще простого. Теперь объясним, как работает Redux в нашем проекте. Принцип работы показан на рисунке 6.2.

Рисунок 6.2 - Принцип работы Redux в проекте

Допустим у нас имеется какое-то действие, например, отображать товар в нашем интернет-магазине. На схеме действие обозначено под цифрой 1. Алгоритм работы любого действия представлен на рисунке 6.3.

Рисунок 6.3 - Алгоритм работы действия

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

Теперь затронем сами редьюсеры. Мы знаем, что любое действие передается нашему редьюсеру. Он обозначен под цифрой 2 на рисунке 6.2. Редьюсеры еще называются преобразователями. Они являются чистыми функциями, то есть функция возвращает всегда одинаковый результат, когда она вызывается с тем же набором аргументов и у неё отсутствуют побочные эффекты. Редьюсеров у нас будет несколько. Схема представлена на рисунке 6.4.

Рисунок 6.4 - Схема связывания редьюсеров

Такое алгоритм необходим, так как мы в хранилище можем отправлять только один объект (редьюсер). Следовательно, мы каждый редьюсер скомбинируем с помощью определенного метода в Root Reducer и будем отправлять именно его.

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

Затем хранилище, которое обозначено под цифрой 3 на рисунке 6.2, оповещает UI об изменении состояния и происходит отображение. В нашем случае это отображение товаров на стартовой странице.

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

Теперь затронем реализацию компонентов с контейнерами. Сама реализация представлена на схеме 6.5.

Рисунок 6.5 - Реализация компонентов

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

Теперь перейдем к реализации алгоритмов для back-end. Будет иметься следующее:

- загрузка данных о товаре с локального сервера;

- при добавлении товара в корзину, добавляется конкретная запись в базу данных в соответствующей директории об этом товаре;

- при удалении товара из корзины удаляется запись из базы в соответствующей директории.

Для реализации всего этого функционала будет использоваться архитектура MVC. Схема данной архитектуры представлена на рисунке 6.6.

Рисунок 6.6 - Архитектура MVC

MVC расшифровывается как Model View Controller, где model отвечает за сохранение и получение данных, view отвечает за отображение этих данных на экране пользователя, controller отвечает за связь между model и view. Структура данной архитектуры вместе с её названием не постоянны. На просторах интернета можно встретить эту же самую архитектуру, но с другими названиями её составляющих, например, MVP.

Что нам дает данная архитектура:

- UI и Model будут разрабатываться независимо друг от друга;

- Model можно без проблем покрыть Unit-тестами;

- Model не содержит логику и данные UI;

- UI не содержит ни капли бизнес-логики.

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

Теперь рассмотрим архитектуру нашего приложения в целом, то есть, включая ui, back-end и базу данных. Схема представлена на рисунке 6.7.

Рисунок 6.7 - Архитектура приложения

То, что выделено ярким цветом - это разрабатываемый Node JS сервер. Он является связующим звеном между базой данных MongoDB и UI (React-приложением).

Теперь немного затронем базу данных MongoDB. Как известно базы данных разделяют на SQL (табличные) и NoSQL (документ-ориентированные). MongoDB как раз и относиться к документ-ориентированных базам данных. Структуру базы данных MongoDB можно рассмотреть на рисунке 6.8.

Рисунок 6.8 - Структура MongoDB.

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

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

7. Разработка блок-схем алгоритмов отдельных процедур

В данном пункте рассмотрим некоторые основные функции, которые встроены в наш интернет-магазин. Первая - отображение товаров, вторая - фильтры сортировки, третья - загрузка данных о товаре c сервера.

Начнем с описания алгоритма отображения товара на странице пользователя. Блок-схема алгоритма представлена на рисунке 7.1.

Рисунок 7.1 - Блок-схема алгоритма отображения товара

Теперь приступим к алгоритму фильтров. Отображения требуемого товара или товаров происходит таким же образом, как и отображение всех товаров, то есть с использованием соответствующего действия и соответствующего состояния хранилища. Данный алгоритм представлен на рисунке 7.2.

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



Рисунок 7.2 - Конец блок-схемы алгоритма сортировки товара

Теперь рассмотрим алгоритм загрузки данных с сервера на стартовую страницу. Данный алгоритм представлен на рисунке 7.3.



Рисунок 7.5 - Конец блок-схемы алгоритма загрузки данных

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

8. Разработка пользовательского интерфейса

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

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

Меню представлено на рисунке 8.1. Оно состоит из названия магазина, итоговой суммы в корзине и самой корзины.

Рисунок 8.1 - Первоначальное меню сайта

Отображение товара показано на рисунке 8.2. Оно представлено в виде окна с изображением, названием/брендом, ценой и с кнопками «Добавить в корзину» и «Подробнее о товаре». При наведении курсора на изображение появляется анимация-изображение меняется на другое. Окно с характеристиками товара показано на рисунке 8.3.



Рисунок 8.2 - Элемент товара с анимацией до и после наведения курсора

Рисунок 8.3 - Описание товара

Отображение всех товаров показано на рисунке 8.4. Отображение будет в 4 столбика, чтобы не нарушать разрешение картинки и компонента.



Рисунок 8.4 - Список товаров

При наведении курсора на кнопку добавления в корзину появляется окно с рейтингом данного товара, также своеобразная анимация. Это можно увидеть на рисунке 8.5.

Рисунок 8.5 - Рейтинг товара

На данный момент имеются некоторые фильтры поиска и поиск по названию. А также фильтр по брендам, цене и размеру. Данный функционал показан на рисунке 8.6.

Рисунок 8.6 - Поиск по названию

Следующий реализованный компонент - это корзина с подсчетом итоговой суммы. Данный функционал показан на рисунке 8.7.

Рисунок 8.7 - Корзина магазина

Также не мало важный реализованный компонент - это footer, где указана некоторая информация о магазине и его контактные данные. Footer представлен на рисунке 8.8.

Рисунок 8.8 - Footer

На сайте имеются две кнопки, первая - для логина, вторая - для регистрации. Формы данных кнопок показаны на рисунке 8.9 и 8.10 соответственно.

Рисунок 8.9 - Форма логина



Рисунок 8.10 - Форма регистрации

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

Рисунок 8.11 - Пользовательский интерфейс магазина

9. Разработка программного обеспечения

Как уже известно, наш проект состоит из следующих частей: действия, компоненты, контейнеры и редьюсеры. Все эти части в итоге экспортированы и импортированы в файлах index.js и store.js. Также добавляется еще серверная часть приложения. Сама структура представлена на рисунке 9.1.

Рисунок 9.1 - Структура проекта

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

9.1 Описание действий

Все действия описаны в папке actions. Имеется три файла JavaScript:

- books.js, действие, вызываемое при отображения товаров;

- cart.js, действие, вызываемое при работы с корзиной, а именно добавлением и удалением товара;

- filter.js, действие, вызываемое при фильтрации и поиска товара.

Рассмотрим код одного из этих файлов, например, books.js. Фрагмент кода представлен на рисунке 9.2.

Рисунок 9.2 - Фрагмент кода

Здесь сразу экспортируются две создаваемые функции. Первая - setBooks с параметром books, которая возвращает ключ (type) и дополнительные свойства payload.

Вторая - setBooksData, метод получения данных. Параметр url - путь, откуда берем данные. А с помощью redux-thunk, мы возвращаем теперь не объект как выше, а функцию setBooks (асинхронный запрос). Запрос к базе данных осуществляем с помощью fetch. Он основан на промисах (promise). По умолчанию он использует get запрос, следовательно, мы должны это изменить. Изменения следуют дальше в коде. Для начала мы обработаем запрос на наличие ошибки. Если все в порядке, то возвращаем наш запрос и обрабатываем его в промисах. Указываем конвертацию данных из MongoDB в JS объект и затем эти данные при помощи dispatch передаем в SetBooks.

9.2 Описание компонентов

Дальше на очереди у нас рассмотрение компонентов. Имеется 7 полноценных компонентов:

- App.jsx, который выполняет роль объединения всех остальных компонентов;

- BookCard.jsx, который отображает товар с названием ценой и кнопками;

- Filter.jsx, который фильтрует товар и организует поиск по названию;

- Footer.jsx, который показывает дополнительную информацию о магазине;

- Login.jsx - форма логина;

- Register.jsx - форма регистрации;

- Menu.jsx - форма, где отображается корзина и итоговая сумма в ней.

Для рассмотрения возьмем компонент App.jsx. На самом деле он является классом, который связывает все остальные компоненты приложения. Рассмотрим его код.

Требуемые для реализации данного файла компоненты, а именно Container и Card, были загружены из специальной библиотеки под названием Semantic UI. Импорт компонентов и не только можно видеть на рисунке 9.3.

Рисунок 9.3 - Импорт для App.jsx

Сам класс представлен на рисунке 9.4.

Рисунок 9.4 - Класс App

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

9.3 Описание контейнеров

У нас имеются следующие контейнеры:

- App.js;

- BookCard.js;

- Filter.js;

- Menu.js.

Все эти контейнеры реализуют соответственную для себя функциональную часть.

Для разбора возьмем контейнер filter.js. Его код показан на рисунке 9.5.

Рисунок 9.5 - Контейнер filter.js

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

9.4 Редьюсеры

В проекте имеется 4 редьюсера:

- Books.js - для возвращения нового состояния списка книг;

- Cart.js - для возвращения нового состояния корзины;

- Filter.js - для возвращения нового состояния при фильтрации списка книг;

- Index.js - комбинирует все выше перечисленные редьюсеры в одно целое.

Редьюсер - это чистая функция, предназначена для того, чтобы хранилище не меняло свое исходное состояние. Вдобавок она возвращает новое состояние хранилищу. Пример реализация редьюсера для корзины представлен на рисунке 9.6.

Использование switch для программирования преобразователей считается наиболее популярным, так как можно обрабатывать различные типы действий. Он проверяет тип действия action.type в инструкции switch, а затем обрабатывает каждый тип действия в варианте case инструкции switch - при получении ключа возвращаем все, что есть у items и затем заменяем то, что требуется для нас у items. Получившееся возвращаем в хранилище. Подобное происходит и при получении ключа `REMOVE_FROM_CART'.

Обычно все написанные редьюсеры (преобразователи) экспортируют в один файл. Такой файл есть и у нас в проекте под названием index.js. Это показано на рисунке 9.7.

Рисунок 9.6 - Редьюсер Cart.js

Рисунок 9.7 - Редьюсер Index.js

Мы много упоминали о таком понятии как хранилище, но не разу его подробно не затронули, поэтому перейдем к нему.

9.5 Хранилище

Понятие хранилище является основным составляющим библиотеки Redux. В проекте он назван store.js, а его код представлен на рисунке 9.8.



Рисунок 9.8 - Хранилище Store.js

При помощи методов createStore мы создаем хранилище, где в качестве первого параметра указываются скомбинированные редьюсеры, а в качестве второго указывается параметр для асинхронности запросов thunk. Затем возвращаем это хранилище и экспортируем его.

Все файлы, которые мы экспортировали, были импортированы в корневом файле index.js. Рассмотрим подробно теперь его.

9.6 Корневой файл Index.js

Код данного файла представлен на рисунке 9.9.

Здесь всё просто. При помощи инструмента Provider мы синхронизируем наше хранилище с компонентом App. А при помощи Router создаются ссылки без перегрузки страницы. Ссылки на формы регистрации и логина. Напоследок опишем наш back-end.

9.7 Реализация back-end

Имеется 4 файла:

- Api.js - прописаны методы GET, POST, DELETE;

- Book.js - схема по которой загружаются данные в базу;

- Card.js - схема по которой загружаются данные в базу;

- Indexserv.js - прописан сам сервер.



Рисунок 9.9 - Корневой файл Index.js

Начнем с организации сервера. Код представлен на рисунке 9.10.

Для начала был подключен express для создания сервера, bodyParser для чтения тела запроса и mongoose для подключения к базе данных MongoDB. Весь функционал express записали в переменную app.

При помощи инструментов listen мы настроили порт для сервера, с помощью use подключились к базе и теперь еще можем читать тело запроса. Начиная с 7 строчки прописана функция, которая снимает блокировки во время отправки запроса с одного порта на другой. Напомним, что само приложение находится на localhost:3000.

Теперь рассмотрим схему загрузки данных в базу на примере файла books.js. Код можно посмотреть на рисунке 9.11.



Рисунок 9.10 - Организация сервера

Рисунок 9.11 - Схема загрузки книг в базу

Для организации данной идеи потребовались два инструмента: mongoose и schema. При создании схемы bookSchema мы используем эти инструменты, а также указываем поля и типы данных. После этого можно без проблем переходить к организации самих запросов. Часть кода представлена на рисунке 9.12.

Рисунок 9.12 - Запросы

Разберем структуру запроса POST. Для начала мы должны указать маршрут, используя инструмент router, а в качестве параметров указываем путь и request, response. Далее с помощью метода create создаем тело запроса, а затем отправляем эти данные на сервер.

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

Рисунок 9.13 - Автоматическое удаление записи из базы

Создается специальный индекс в схеме createdAt и устанавливается таймер на час. После часа запись будет удалена с базы и товар из корзины.

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

10. Тестирование

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

Цели тестирования чаще всего бывают следующие:

- проверка работоспособности;

- аттестация программного продукта;

- выявление факта наличия ошибки и её локализация;

- определение надежности.

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

Тестирование данного интернет-магазина в целом состоит из тестирования отдельных модулей.

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

Формирование запросов, а именно загрузка данных о товаре и добавление товара в корзину, занимает менее одной секунды. При добавлении товара в корзину отображается вся информация, которая настроена в схеме, а именно: автоматический id, название, производитель, цена и ссылка на изображение. Результат показан на рисунке 10.1.



Рисунок 10.1 - Результат добавления товара в корзину на сервере и у пользователя

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

При отправке данных в регистрационной форме, все поля должны быть заполнены. Если этого не сделать, то выдаст ошибку и напоминании о заполнении конкретного поля. Результат показан на рисунке 10.2. Аналогично было сделано и с формой для входа. Применена стратегия черного ящика.

Рисунок 10.2 - Результат тестирования формы

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

Также было проведено тестирование модуля поиска товара по названию. Если ввести название не существующего товара, то выдаст сообщение Not found. Если ввести название в верхнем регистре, то поиск регистр проигнорирует и выведет нужный товар. Результаты на рисунке 10.3.

Рисунок 10.3 - Результат тестирования поиска товара по названию

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

11. Разработка методических указаний

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

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

Итак, для начала перейдем в папку с базой данных. Команда следующая:

$ cd C:\Program Files\MongoDB\Server\4.0\bin

После того, как мы зашли в нужную директорию, запустим базу данных следующей командой:

$ mongod

Теперь наша база данных запущена. Сворачиваем данное окно и переходим к второму.

Нам нужно запустить сервер. Для этого переходим в папку с нашим проектом по следующей команде:

$ cd C:\Users\12\Desktop\Shop1 -- копия\shop_books

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

$ nodemon indexserv

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

$ yarn start

У вас автоматически откроется браузер с адресом: http://localhost:3000. Именно на нем и находится наше приложение. Чтобы увидеть данные на сервере, которые отображаются на странице, вбейте в строку адрес: http://localhost:4000/api/book. Если хотите увидеть данные, которые добавлены в корзину, вбейте в строку адрес: http://localhost:4000/api/card.

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

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

Если навести курсором на кнопку добавления товара, то появится окно с рейтингом этого товара.

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

В самом низу есть footer с информацией о данном магазине. Можно без проблем переключаться по табам, это никак не повлияет на работу магазина.

Заключение

Во время выполнения выпускной квалификационной работы был реализован основной функционал интернет-магазина по продажам электронных книг.

Разработка магазина на базе ReactJS, Redux, NodeJS, MongoDB позволила обеспечить:

- быструю скорость разработки;

- быструю скорость взаимодействия пользователя с приложением;

- полную свободу действий;

- реализацию требуемого функционала;

- читаемость всего кода.

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

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

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

1. Классификация сайтов [Электронный ресурс] // Internet-technologies: сайт. - Режим доступа: https://www.internet-technologies.ru/articles/klassifikaciya-saytov-vidy-saytov.html.

2. ImageCMS [Электронный ресурс] // IageCMS: сайт. - Режим доступа: https://www.imagecms.net/blog/e-commerce/kakie-byvaiut-internet-magaziny-klassifikatsiia.

3. ФинЭкспертГруп [Электронный ресурс] // ExpertGroup: сайт. - Режим доступа: http://www.finexg.ru/klassifikaciya-internet-magazinov/

4. PocketBook [Электронный ресурс] // POCKETBOOK: сайт. - Режим доступа: https://pocketbook.ru.

5. ReaderONE [Электронный ресурс] // ReaderONE: сайт. - Режим доступа: https://www.readerone.ru.

6. MediaDoma [Электронный ресурс] // MEDIATEC: сайт. - Режим доступа: https://mediadoma.com/atom-obzor-sravnenie-s-sublime-visual-studio-code-vim.

7. RightBlog [Электронный ресурс] // RIGHTBLOG: сайт. - Режим доступа: http://rightblog.ru/3504.

8. Node.JS [Электронный ресурс] // NODE: сайт. - Режим доступа: https://nodejs.org/en/.

9. LearnJavaScript [Электронный ресурс] // LearnJavaScript: сайт. - Режим доступа: https://learn.javascript.ru.

10. Знакомство с JSX [Электронный ресурс]: электрон. пособие / Lectrum - Электрон. дан. - Москва: 2018. - 1 электрон. опт. диск (CD-R).

11. Введение в React [Электронный ресурс]: электрон. пособие / Lectrum - Электрон. дан. - Москва: 2018. - 1 электрон. опт. диск (CD-R).

12. Знакомство с React [Электронный ресурс]: электрон. пособие / Lectrum - Электрон. дан. - Москва: 2018. - 1 электрон. опт. диск (CD-R).

13. React [Электронный ресурс] // ReactJS: сайт. - Режим доступа: https://reactjs.org.

14. Redux [Электронный ресурс] // Redux: сайт. - Режим доступа: https://redux.js.org

15. А. Бенкс, Е. Порселло React и Redux [Электронный ресурс]: электрон. учебник / А. Бенкс, Е. Порселло. - Электрон. дан. - Санкт-Петербург: 2018. - 1 электрон. опт. диск (CD-R).

16. Н. Закас ECMAScript 6 для разработчиков - [Электронный ресурс]: электрон. учебник / Н. Закас. - Электрон. дан. - Санкт-Петербург: 2018. - 1 электрон. опт. диск (CD-R).

Приложение 1

(обязательное)

API интернет-магазина

Ниже представлен листинг кода структуры API интернет-магазина.

const express = require("express"); //подключили express

const Book = require("./book"); //подключили схему

const Card = require("./card");

const router = express.Router(); //для обработки маршрута

router.get("/book", (req, res) => {

Book.find({}) //получаем все данные

//все методы основаны на промисах => возвращается промис

.then(book => {

res.send(book);

}); //для возвращения сервером добавленных данных

}); //урл доступа к данным и функция для получения этих данных

router.post("/book", (req, res) => {

Book.create(req.body)

//параметр - те данные которые мы хотим сохранить в бд (всё тело запроса)

//все методы основаны на промисах => возвращается промис

.then(book => {

res.send(book);

}); //для возвращения сервером добавленных данных

}); //урл доступа к данным и функция для получения этих данных

router.put("/book/:id", (req, res) => {

Book.findByIdAndUpdate({ _id: req.params.id }, req.body)

//первый параметр - id документа (конкретный id ищем при помощи params),

//второй - информация которую нужно обновить

//сначала идем получение данных, затем их обновление = > сделаем получение сразу обновленных данных

.then(() => {

Book.findOne({ _id: req.params.id })

//нашли конкретную запись еще раз и затем получаем обновленные данные

.then(book => {

res.send(book);

});

});

}); //урл доступа к данным и функция для получения этих данных

router.delete("/book/:id", (req, res) => {

Book.deleteOne({ _id: req.params.id }).then(book => {

res.send(book);

});

}); //урл доступа к данным и функция для получения этих данных

//получение данных с корзины

router.get("/card", (req, res) => {

Card.find({}).then(card => {

res.send(card);

});

});

//отправим данные в корзину

router.post("/card", (req, res) => {

Card.create(req.body).then(card => {

res.send(card);

});

});

//удалим данные из корзины

router.delete("/card/:id", (req, res) => {

Card.deleteOne({ _id: req.params.id }).then(card => {

res.send(card);

});

});

module.exports = router;

Приложение 2

Формат хранимых данных на сервере

Данные, которые хранятся на сервере и отображаются на странице представлены на рисунке 1.1.

Рисунок 1.1 - Хранение выводимых данных

Размещено на Allbest.ru

...