Таблица | Карточка | RUSMARC | |
Разрешенные действия: –
Действие 'Прочитать' будет доступно, если вы выполните вход в систему или будете работать с сайтом на компьютере в другой сети
Действие 'Загрузить' будет доступно, если вы выполните вход в систему или будете работать с сайтом на компьютере в другой сети
Группа: Анонимные пользователи Сеть: Интернет |
Аннотация
Объектом исследования является прикладная автоматизация и интеграция API для веб портала услуг форвардера (посредника). Цель работы — разработка методологии интеграции API при разработке сервиса форвардера. В результате исследования был создан прототип портала сервиса форвардера с личным кабинетом пользователя и базовым REST API. Основные показатели: высокая скорость отдачи страниц, высокий уровень юзабилити системы, сео оптимизация страниц, свое API для работы с интернет магазинами.
The object of the study is application automation and integration of the API for the forwarding agent's web portal. The goal of the work is to develop an API integration methodology for the development of the forwarder service. As a result of the research, a prototype of the forwarder service portal with a personal user cabinet and a basic REST API was created. Key indicators: high speed of feedback, high level of system usability, SEO optimization of pages, its API for working with online stores.
Права на использование объекта хранения
Место доступа | Группа пользователей | Действие | ||||
---|---|---|---|---|---|---|
Локальная сеть ИБК СПбПУ | Все | |||||
Интернет | Авторизованные пользователи СПбПУ | |||||
Интернет | Анонимные пользователи |
Оглавление
- www.alexa.com — Глобальный сайт аналитики веб ресурсов.
- Backbone.js представляет данные в виде моделей, которые могут быть созданы, проверены, уничтожены и сохранены на сервере.
- CMS (Content Management System) — Система управления сайтом.
- Тег
- UI (User Interface) — Пользовательский интерфейс.
- Do not Repeat Yourself — Не повторяй себя
- LAMP - акроним для «Linux, Apache, MySQL, Perl / PHP / Python».
- Язык описания данных
- Первоначально это была только функция MyISAM; поддерживаемая InnoDB с момента выпуска MySQL 5.6.
- Шардинг представляет собой горизонтальное разделение данных в базе данных или поисковой системе. Каждый отдельный раздел называется шардом. Каждый шард хранится на отдельном экземпляре сервера базы данных для распределения нагрузки на сервер.
- MapReduce — модель распределённых вычислений, представленная компанией Google, используемая для параллельных вычислений над очень большими, вплоть до нескольких петабайт,наборами данных в компьютерных кластерах.
- Кольцевой буфер, или циклический буфер (англ. ring-buffer) — это структура данных, использующая единственный буфер фиксированного размера, как будто бы после последнего элемента сразу же снова идет первый. Такая структура легко предоставляет возможность буферизации потоков данных.
- В информатике акроним ACID описывает требования к транзакционной системе (например, к СУБД), обеспечивающие наиболее надёжную и предсказуемую её работу. Требования ACID были в основном сформулированы в конце 70-х годов Джимом Греем
- Протокол без сохранения состояния (англ. Stateless protocol) — это протокол передачи данных, который относит каждый запрос к независимой транзакции, которая не связана с предыдущим запросом, общение с сервером состоит из независимых пар запрос-ответ [8].
- SOAP (от англ. Simple Object Access Protocol — простой протокол доступа к объектам) — протокол обмена структурированными сообщениями в распределённой вычислительной среде.
- CRUD (сокр. от англ. create, read, update, delete — «создать, прочесть, обновить, удалить») — акроним, обозначающий четыре базовые функции, используемые при работе с персистентными хранилищами данных.
- Model-view-controller — модель-представление-контроллер.
- Json Web Token
- По данным https://try.powermapper.com/demo
- По данным https://sitechecker.pro/seo-report Чем выше число, тем лучше.
- По данным https://ping-admin.ru
- 61
- 4
- Министерство образования и науки Российской Федерации
- Санкт-Петербургский политехнический университет Петра Великого
- Институт компьютерных наук и технологий
- Кафедра «Компьютерные интеллектуальные технологии»
- Работа допущена к защите
- Заведующий кафедрой КИТ ИКНТ
- _____________ Щукин А.В.
- «____» ____________ 2018 г.
- ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА МАГИСТРА
- Применение методологии интеграции API при разработке сервиса форвардера
- по направлению: 09.04.03 Прикладная информатика
- программа подготовки магистров «Технологии веб-разработки»
- Выполнил
- студент гр. в33546/71 Д.С. Гайворонский
- Руководитель
- доцент, к.т.н. А.В. Иванищев
- Санкт-Петербург
- 2018
- Реферат
- Выпускная квалификационная работа магистра содержит 60 страниц, 26 рисунков, 2 табл., 12 источников.
- Тема: Применение методологии интеграции API при разработке сервиса форвардера.
- Ключевые слова: портал форвард сервиса, онлайн кабинет пользователя, автоматизация процессов сервиса форвардера, api для доступа удаленного доступа форвардеров.
- Объектом исследования является прикладная автоматизация и интеграция API для веб портала услуг форвардера (посредника).
- Цель работы — разработка методологии интеграции API при разработке сервиса форвардера. В результате исследования был создан прототип портала сервиса форвардера с личным кабинетом пользователя и базовым REST API.
- Основные показатели: высокая скорость отдачи страниц, высокий уровень юзабилити системы, сео оптимизация страниц, свое API для работы с интернет магазинами.
- The Abstract
- Master’s thesis contains 60 p., 26 pic., 2 tab., 12 sources.
- Subject: Application of API integration methodology for developing forwarder service
- Keywords: portal forward service, online user cabinet, automation of forwarder service processes, api for remote access access to forwarders.
- The object of the study is application automation and integration of the API for the forwarding agent's web portal.
- The goal of the work is to develop an API integration methodology for the development of the forwarder service.
- As a result of the research, a prototype of the forwarder service portal with a personal user cabinet and a basic REST API was created.
- Key indicators: high speed of feedback, high level of system usability, SEO optimization of pages, its API for working with online stores.
- СОДЕРЖАНИЕ
- ВВЕДЕНИЕ 6
- ГЛАВА 1. ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ 8
- 1.1 Кто такие форвардеры 8
- 1.2 Схема работы форвард сервисов 9
- 1.3 Обзор существующих аналогов 10
- 1.3.1 Шопфанс (shopfans.ru) 10
- 1.3.2 Бандеролька (qwintry.com) 13
- 1.3.3 Почтой.ком (pochtoy.com). 15
- 1.3.4 Шопотам (shopotam.ru) 16
- 1.3.5 Обзор наиболее близкого аналога. Тевипо (tevipo.com) 18
- 1.4 Актуальность проблемы 21
- 1.5 Вывод 22
- 1.6 Цель работы 24
- 1.7 Задачи 24
- 1.8 Требования 25
- 1.9 Набор критериев сравнения и оценки аналогов 25
- ГЛАВА 2. ОБЗОР ТЕХНИЧЕСКИХ СРЕДСТВ РАЗРАБОТКИ 26
- 2.1 Обзор средств разработки серверной части портала 27
- 2.1.1 Node.js 28
- 2.1.2 PHP 28
- 2.1.3 MySQL 32
- 2.1.4 MongoDB 34
- 2.1.5 RESTful API 38
- 2.1.6 HTTP 2.0 40
- 2.1.7 Паттерн проектирования MVC 41
- 2.2 Обзор средств разработки клиентской части портала 43
- 2.2.1 HTML 5 43
- 2.2.2 CSS (Каскадные таблицы стилей) 45
- 2.2.3 JavaScript 47
- 2.2.4 Bootstrap 4. CSS фреймворк 48
- 2.3 Безопасность приложения 49
- 2.3.1 Хеш функция 49
- 2.3.2 Протокол SSL 50
- 2.4 Интеграция с API сторонних разработчиков 51
- 2.5 Выводы в выборе средств программной разработки 51
- ГЛАВА 3. ПРАКТИЧЕСКАЯ РЕАЛИЗАЦИЯ РАЗРАБОТКИ ПОРТАЛА 52
- 3.1 Моделирование баз данных 52
- 3.2 Серверная часть с использованием языка PHP 53
- 3.3 Имплементация кода для REST API на Node.js 54
- 3.4 Личный кабинет клиента 55
- 3.5 Дизайн и верстка 56
- 3.6 Апробация 57
- 3.7 Выводы 58
- ЗАКЛЮЧЕНИЕ 59
- Список использованных источников 60
- ВВЕДЕНИЕ
- Интернет торговля становится все более популярной среди населения Российской Федерации. Существует множество интернет магазинов как внутри страны, так и за рубежом. Однако, в связи с продолжающимся кризисом, покупки в интернет магазинах внутри страны становятся все более дорогими, а интернет магазины за рубежом становятся все более популярными и адаптированными под российского потребителя (рис 1). Примерами могут послужить такие крупные игроки на рынке как: AliExpress, Alibaba, E-Bay, Amazon и другие крупные бренды.
- Рисунок 1. Статистика интернет торговли: внутренний рынок и внешний рынок
- В настоящий момент, уровень запросов в зарубежные магазины растет, что показано на рисунке 1. Однако, существуют определенные трудности с оплатой товара и его последующей доставкой. Многие зарубежные магазины не принимают к оплате карты, выпущенные в Российской Федерации, или не отправляют товар в нашу страну. По этим причинам в интернет торговле появился новый тип сервиса, который является прослойкой между покупателем и зарубежным интернет магазином, называемый форвард сервисом. Компании форвардеры, базируются в стране зарубежного магазина и производят покупки от лица покупателя, в дальнейшем покупки доставляются по адресу склада компании в стране интернет магазина. Последующая пересылка производится с адреса склада сервиса на адрес покупателя за определенню плату.
- Комплексная автоматизация процессов такого сервиса требует проработки многих технических аспектов, включая интеграцию современных методов и средств разработки. Не существует единой архитектуры или технологического решения для реализации сервиса подобного рода. При проектировании надо делать упор на удобство для пользователя и администратора системы. Для администратора такого сервиса будет стоять задача организации документооборота и статусов заказов внутри системы, начиная от отслеживания покупки клиента от магазина, заканчивая конечной доставкой до адреса пользователя.
- Нужно, также, учитывать, что подобный сервис должен иметь высокий уровень интеграции с API партнеров и сторонних разработчиков, для упрощения автоматизации внутренних и внешних процессов.
- ГЛАВА 1. ОБЗОР ПРЕДМЕТНОЙ ОБЛАСТИ
- 1.1. Кто такие форвардеры
- Форвардинг – это услуга по пересылке товара от магазина к покупателю с использованием виртуального адреса. Обычно, форвардеры используются как посредники между покупателем в одной стране и магазином в другой стране. Как правило, клиент получает виртуальный адрес в стране регистрации форвард сервиса с индивидуальным номером ячейки на складе, после этого, совершает покупки в зарубежном магазине, где указывает адрес форвардера как адрес получателя товара. Когда товар приходит на склад форвардера, тот пересылает посылку конечному клиенту (рис. 1.1).
- Рисунок 1.1. Общая схема работы форвард сервиса
- Данный вид услуги становится все более популярным в России, поскольку покупатель имеет возможность купить качественный товар известных брендов по более низкой цене, чем в российских магазинах. Также надо учитывать, что многие зарубежные магазины не отправляют в Россию свои товары по той или иной причине, например по причине санкций.
- Аналогичные порталы предоставляют клиентам во многом схожий функционал, перечислим основные общие функции и возможности портала форвард сервиса:
- Регистрация новых пользователей
- Личный кабинет клиента
- Регистрация посылок в базе данных
- Отслеживание посылок в личном кабинете пользователя
- Присваивание индивидуальной ячейки на складе по виртуальному адресу
- Пополнение счета пользователя с помощью платежных систем
- Калькулятор стоимости доставки до адреса пользователя
- Интеграция с API логистических компаний
- Наличие своего REST API для местных интернет магазинов
- Страхование посылки через API логистической компании
- Объединение посылок с внесением во внутреннюю систему
- Мультиязычность
- 1.2 Схема работы форвард сервисов
- Существуют две основных структуры форвард сервисов:
- работа по прямой ссылке и покупка товаров от имени клиента
- выделение виртуального адреса с присвоением ячейки на складе, номером которой, как правило, является ID в базе данных
- Первый тип структуры прост — клиент регистрируется в системе, после получения доступа в личный кабинет, он выбирает понравившийся товар в интернет магазине, копирует ссылку на товар и вставляет ее в специальной форме в личном кабинете. Администратор сервиса заходит по ссылке и покупает товар для клиента, после этого администратор делает отметку в личном кабинете пользователя о том, что товар был куплен и ожидает доставки на склад. Клиент получает сообщение об успешной покупке товара и оплачивает услуги по фиксированному тарифу. После того как форвардер получил оплату, он пересылает товар клиенту в страну проживания посредством выбранного клиентом метода, также добавляя отметку об этом во внутреннюю систему.
- Второй тип немного сложнее — клиент регистрируется в системе, ему выдается уникальный идентификатор, который также является номером виртуальной ячейки на складе сервиса, как правило им выступает уникальный ID пользователя. После регистрации, клиент самостоятельно совершает покупки в интернет магазине, где указывает адресом доставки выданный ранее сервисом виртуальный адрес. После завершения покупки, клиент должен зарегистрировать в системе через личный кабинет номер отслеживания посылки, который вносится во внутреннюю систему сервиса. После того, как посылка доставлена на склад, администратор сервиса делает отметку в личном кабинете клиента о том, что товар прибыл на склад и готов к отправке в страну клиента. Клиент должен оплатить услуги сервиса, а также выбрать удобный способ доставки до места проживания. Как только сервис получает оплату, он высылает товар клиенту, на указанный в личном кабинете адрес.
- 1.3 Обзор существующих аналогов
- В данном сегменте рынка существует большое количество аналогов. Рассмотрим самые популярные из них.
- 1.3.1 Шопфанс (shopfans.ru)
- Форвард сервис шопфанс является одним из лидеров на рынке. С начала 2018 года этот сервис искали в среднем 12 000 человек в месяц (рис. 1.2). На главной страницы портала есть возможность регистрации и входа в личный кабинет, в информационной части страницы показываются анимированные блоки с информацией как пользоваться сервисом и личным кабинетом пользователя. По версии Alexa, сайт shopfans.ru находится на 12 135 месте в России и 132 058 месте в мире.
- Рисунок 1.2. Статистика запросов портала shopfans.ru (по версии yandex wordstat)
- После прохождения регистрации, пользователю предоставляется доступ в личный кабинет (рис. 1.3). В личном кабинете имеется возможность добавить новую посылку, требуется ввести данные получателя, выбрать пункт выдачи посылки в своем городе, заполнить декларацию, выбрать опцию страхования, а также ввести номер отслеживания посылки от интернет магазина (рис. 1.4). В личном кабинете имеется функционал чата с менеджерами компании. С помощью инспектора браузера firefox был сделан вывод, что личный кабинет пользователя был написан с помощью фреймворка Backbone.js. Сайт находится под управлением CMS Wordpress. Версия языка PHP — 5.6.
- Рисунок 1.3. Личный кабинет пользователя Шопфанс
- Рисунок 1.4. Добавление новой посылки в личном кабинете шопфанс.
- 1.3.2 Бандеролька (qwintry.com)
- Бандеролька на данный момент является лидером среди игроков форвард сервисов. С начала 2018 года было сделано в среднем около 33 000 запросов названия сервиса в яндексе (рис. 1.5). Данный ресурс занимает 5 598 место в России и 50 344 место в мире по версии веб сервиса Alexa.
- На главной странице есть возможность регистрации и входа в личный кабинет, имеется функционал мультиязычности. После регистрации пользователю доступен личный кабинет со следующим функционалом (рис. 1.6):
- Создание ожидаемой посылки
- Поиск посылки по номеру отслеживания
- Пополнение баланса через платежные системы
- Настройки профиля
- Калькулятор доставки
- Портал находится под управлением CMS Drupal.
- Рисунок 1.5. Статистика запросов портала Бандеролька (по данным yandex wordstat)
- Рисунок 1.6. Личный кабинет пользователя портала Бандеролька
- По адресу https://logistics.qwintry.com/api находится API для работы с онлайн магазинами или другими форвард сервисами. Список методов для работы с API представлен на рисунке 1.7.
- Рисунок 1.7. Список методов для работы с API форвард сервиса Бандеролька
- Как видно из рисунка 1.7, методы работы с API «Бандерольки» позволяют пользователю сделать запросы на стоимость доставки; получить список доступных стран; получить список хабов; создать доставку; обновить доставку; удалить доставку; отследить созданный заказ доставки.
- 1.3.3 Почтой.ком (pochtoy.com).
- Сервис почтой.ком не является таким популярным, как другие аналоги. С начала 2018 года было примерно 1200 запросов в месяц (рис. 1.8). Рейтинг сайта в России — 12 671, в мире — 151 485, по версии аналитического сервиса Alexa. На главной странице сервиса доступна регистрация, после которой будет доступен личный кабинет пользователя (рис. 1.9). Добавление новой посылки осуществляется как через оператора, что не очень удобно для клиента, потому как управление покупкой полностью передается на сторону сервиса и управляется вручную, так и в автоматическом режиме с помощью добавления посылки через номер отслеживания интернет магазина. Проанализировав сайт с помощью инспектора, можно сделать вывод, что портал написан на одном из фреймворков PHP с использованием технологии AJAX.
- Функционал портала состоит из следующих пунктов:
- Редактирование своего аккаунта
- Добавление заказа
- Пополнение баланса с помощью платежной системы
- Отслеживание своего заказа с помощью трек номера
- Рисунок 1.8. Статистика запросов портала почтой.ком (по данным yandex wordstat)
- Рисунок 1.9. Личный кабинет пользователя сервиса почтой.ком
- Для верстки front-end был применен HTML фреймворк Bootstrap 3, jQuery 1.11.
- 1.3.4 Шопотам (shopotam.ru)
- Форвард сервис шопотам один из самых старых порталов данной тематики в интернете. С начала 2018 года этот портал запросило в среднем 10000 пользователей в месяц (рис. 1.10). После регистрации пользователю предоставляется личный кабинет со следующим основным функционалом (рис. 1.11):
- Внутренняя почта
- Пополнение счета через платежные сервисы
- Калькулятор доставки
- Редактирование профиля
- Отслеживание посылок
- Интеграция с социальными сетями
- Рисунок 1.10. Статистика запросов портала шопотам (по данным yandex wordstat)
- Рисунок 1.11. Личный кабинет пользователя сервиса шопотам
- Также на портале имеется удобная система распределения по разделов по тематике. Портал агрегирует каталог товаров с сайтов сторонних магазинов, с последующей сортировкой на своем сайте.
- 1.3.5. Обзор наиболее близкого аналога. Тевипо (tevipo.com)
- Наиболее близким аналогом и конкурентом нашего проекта является портал Тевипо. Данный сервис предлагает свои услуги только в Турции, это означает, что конечный пользователь может совершить покупки в Турецких магазинах, с последующей доставкой в страну назначения через данный сервис. У портала Тевипо не очень много запросов, в соответствии со статистикой yandex.wordstat (рис. 1.12). Однако портал пользуется спросом среди постоянных пользователей.
- Портал поддерживается с помощью системы CMS Joomla. Интерфейс главной страницы портала предполагает регистрацию и вход в личный кабинет (рис. 1.13). После регистрации на сайте, пользователь получает письмо с подтверждением регистрации, а также с данными указанными при регистрации: логином и паролем в не зашифрованном виде, что является грубым нарушением безопасности.
- В личном кабинете пользователя имеется следующий функционал:
- Добавление заказа через форму с мгновенным автоматическим подсчетом стоимости услуг портала.
- Поиск всех своих заказов в истории.
- Пополнение баланса, посредством интеграции API интеркасса (interkassa.com).
- Возможность редактирования профиля и личных данных пользователя.
- Встроенный iframe со страницей отслеживания почты России, Белоруссии, Украины и Казахстана.
- Стоит отметить, что сервис Тевипо не интегрирован с API сторонних элементов сервиса, таких как: отслеживание посылок в режиме реального времени; REST API для партнеров; калькулятора доставки, интегрированного с API логистических компаний.
- Сервис не предоставляет автоматизацию процессов покупки. В личном кабинете есть возможность добавлять заказ посредством копирования прямой ссылки на товар из интернет магазина. После размещения заказа в личном кабинете, менеджер портала вручную покупает товары по размещенным ранее ссылкам. После всех произведенных манипуляций, товар приходит на склад сервиса в Турции, с последующей отправкой в страну назначения. В личном кабинете в истории заказов появится данная посылка с номером отслеживания, который можно будет отследить через сервис отслеживания, встроенный в сайт посредством iframe. Описанная выше схема работы может быть не очень удобна для конечного пользователя, так как предполагает низкую автоматизацию процессов, потерю денежных средств на комиссиях и конвертациях, перевод своих денежных средств порталу до совершения фактической покупки в магазине.
- На портале встроен модуль Joomla чата jivosite, однако чат работает только в том случае, если менеджер сайта находится онлайн.
- Можно сделать вывод, что портал Тевипо носит скорее информативный характер. На портале не имеется средств автоматизации, не выявлено интеграции со сторонними сервисами, кроме модуля оплаты.
- Рисунок 1.12. Статистика запросов портала Тевипо (по данным yandex wordstat)
- Рисунок 1.13. Личный кабинет портала Тевипо
- 1.4 Актуальность проблемы
- Актуальность разработки портала сервиса форвардера обусловлена недостаточным количеством качественных сервисов в данном сегменте.
- Существующие сервисы не обладают требуемым качеством, удобством и уровнем услуг. У рассмотренных аналогов выявлены следующие недостатки:
- Низкий уровень автоматизации процессов от момента оформления заказа до момента его получения пользователем
- Недостаточная интеграция со сторонними ресурсами, таких как логистические компании
- Почти у всех аналогов нет своего RESTful API, кроме сервиса «Бандеролька»
- Отсутствует стандартизация предоставления услуг в данном сегменте
- Низкая эргономика порталов аналогов для конечного пользователя
- Низкий уровень безопасности сохранности данных у некоторых аналогов
- Сервис позволит оптимизировать и повысить эффективность и качество оказываемых услуг для конечного пользователя. Перечислим некоторые преимущества:
- Повышение удобства для конечного пользователя
- Экономия времени пользователя за счет автоматизации процессов
- Возможность интеграции со сторонними ресурсами
- Доступ к ресурсу через свой профиль в социальных сетях. Интеграция с API социальных сетей
- Отслеживание посылки в режиме онлайн
- Агрегирование на странице логистики способов доставки
- Общая безопасность сохранности данных
- Для полноценного функционирования сервиса, необходимо соблюдать закон «Об информации, информационных технологиях и о защите информации» (от 27.07.2006 N 149-ФЗ ред. От 23.04.2018), этот закон гарантирует достоверность информации. Также документ обязывает владельцев ресурсов в течение полугода хранить распространенную ими новостную информацию и сведения о ее источниках [2].
- 1.5 Вывод
- На протяжении последних четырех лет доля рынка интернет продаж стабильно увеличивается. У российских пользователей появляется опыт работы с интернет магазинами, электронными деньгами и онлайн платежами, с каждым годом увеличивается доля пользователей интернета в России, которые все чаще заходят в интернет (рис. 1.4.1). Доля людей со смартфонами растет, соответственно, становится проще выходить в интернет с мобильных устройств из любого места. Однако, стоит отметить, что во всем мире мобильный трафик превышает десктопный трафик, в отличие от Российской Федерации (рис. 1.4.2), следовательно выходи в интернет с мобильных устройств имеет тенденцию к росту, а значит, стоит делать упор на мобильное приложение. Вышесказанное позволяет сделать позитивный прогноз касаемо интернет продаж на будущее (рис. 1.4.3).
- Изучив вопрос предметной области в сфере форвард услуг, можно прийти к выводу, что данная область нуждается в расширении и улучшении качества оказываемых электронных услуг. С помощью автоматизации процессов можно увеличить скорость и качество оказываемых услуг. Эта область является перспективной в будущем и требует поддержки со стороны разработчиков.
- Рисунок 1.4.1. Доля пользователей интернет в России
- Рисунок 1.4.2. Статистика заказов с использованием десктопного и мобильного трафика
- Рисунок 1.4.3. Прогноз объема интернет продаж. По данным Data insight
- 1.6 Цель работы
- Создавая прототип портала форвард сервиса нужно опираться на удобство для конечного пользователя, приятный и удобный UI. Целью данного проекта является разработка прототипа веб-сервиса, предназначенного для заказа, отслеживания и консолидации товаров из личного кабинета, а также удобную автоматизированную систему администрирования. Также необходимо интегрировать API отслеживания посылок и платежных средств со стороннего веб-сервиса, для удобства конечного пользователя. Превзойти по скорости.
- 1.7 Задачи
- Отметим следующие задачи для реализации целей:
- Автоматизация внутренних процессов
- Разработка UI личного кабинета пользователя
- Разработка структуры приложения
- Разработка структуры базы данных
- Создание калькулятора доставки
- Проектирование защищенного REST API
- Интеграция с API сторонних элементов сервиса
- Обеспечение безопасности и надежности приложения
- Соблюдение всех стандартов в законодательстве РФ
- 1.8 Требования
- Скорость обработки данных
- Адаптивная верстка под все популярные устройства
- Эргономичный интерфейс личного кабинета клиента и администратора
- Возможность отслеживания посылки в реальном времени
- Безопасные платежи
- 1.9 Набор критериев сравнения и оценки аналогов
- Согласно ГОСТ 28195-89 «Оценка качества программных средств» [1] оценку сайта можно осуществлять, используя экспертный и органолептический метод. Данный стандарт не содержит требований, предъявляемых непосредственно к веб-проектам, но устанавливает общие положения по оценке качества программных средств, что позволяет говорить о возможности применения установленных критериев для оценки сетевых программных продуктов [6]. Веб специалисты, занимающиеся проектированием веб порталов определяют следующие критерии для оценки веб приложений:
- Индексация сайта поисковыми системами, SEO оптимизация.
- Удобство и эргономичность пользования, также известно как «юзабилити». Для этого критерия существует стандарт ISO 9241-11.
- Функциональность.
- Скорость обработки запросов.
- ГЛАВА 2. ОБЗОР ТЕХНИЧЕСКИХ СРЕДСТВ РАЗРАБОТКИ
- Для создания прототипа портала и достижения вышеперечисленных целей и задач необходимо спроектировать серверную часть приложения, совместно с клиентской частью. Серверная часть будет разбита на две части. Первая часть будет отвечать за работу портала, регистрацию и проверку пользователей, хранение данных о пользователях, передавать данные от базы данных к пользователю. Вторая часть будет отвечать за REST API приложение, это понадобится для чтения, создания, редактирования и удаления посылок в системе.
- Клиентская часть будет сверстана с соблюдением современных стандартов верстки, будет адаптивной и легкой в использовании.
- Для начала определим основные части интерфейса личного кабинета пользователя, так как он является ключевым элементом в портале:
- На портале должна быть доступна регистрация пользователя, с последующим входом в личный кабинет. Во время регистрации, программа должна определить роль пользователя, дать привилегии. После регистрации, пользователь должен подтвердить свою электронную почту;
- Пользователь должен иметь возможность просмотреть свой профиль и при желании изменить данные профиля;
- В личном кабинете должен быть функционал добавления новой посылки, с последующим отслеживанием процесса в режиме онлайн;
- Дать возможность пополнить свой баланс, с помощью API платежных систем;
- В кабинете должны присутствовать последние новости портала, изменения в правилах и информация об акциях и пр.;
- Клиент должен видеть свой виртуальный адрес из личного кабинета;
- При возникновении сложностей в работе, надо предоставить клиенту возможность обратиться в on-line чат за поддержкой;
- 2.1 Обзор средств разработки серверной части портала
- С начала 21-го века, множество языков программирования активно развивались, каждый из языков обладает как достоинствами, так и недостатками. В наше время существует множество языков программирования подходящих под любую задачу (рис. 2.1), от написания сложных программ для космической промышленности, до написания простых мобильных приложений. В 2018 году десятка лидеров выглядит следующим образом: Java, C, C++, Python, C#, JavaScript, Visual Basic .NET, R, PHP, Perl.
- Рисунок 2.1. Рейтинг языков программирования с 2002 по 2018 года, по версии TIOBE
- Каждый из языков обеспечивает связь между пользователем и сервером, при необходимости подключается к базе данных. При обращении пользователя к определенной странице веб ресурса, происходит запрос к серверу, где программа обрабатывает его и делает запрос к базе данных, после чего возвращает пользователю готовую страницу в браузер.
- 2.1.1 Node.js
- Node.js - это среда с открытым исходным кодом, кросс-платформенная среда выполнения JavaScript, которая выполняет код JavaScript вне браузера. Исторически JavaScript использовался прежде всего для клиентских сценариев, в которых скрипты, написанные на JavaScript, встроены в HTML-страницу и запускаются клиентской стороной с помощью механизма JavaScript в веб-браузере пользователя. Node.js позволяет разработчикам использовать JavaScript для написания инструментов командной строки и для серверных скриптовых сценариев на стороне сервера для создания динамического содержимого веб-страницы до того, как страница будет отправлена в веб-браузер пользователя. Следовательно, Node.js представляет собой парадигму «JavaScript везде» [14], унификацию разработки веб-приложений вокруг одного языка программирования, а не разных языков для сценариев на стороне сервера и на стороне клиента. Хотя «.js» является обычным расширением имени файла для кода JavaScript, имя «Node.js» не относится к определенному файлу в этом контексте и является просто именем продукта. Node.js имеет управляемую событиями архитектуру, способную к асинхронному вводу-выводу. Эти варианты дизайна направлены на оптимизацию пропускной способности и масштабируемости в веб-приложениях с множеством операций ввода-вывода, а также для веб-приложений реального времени (например, в программах связи в реальном времени и браузерных играх) [19].
- 2.1.2 PHP
- PHP: Hypertext Preprocessor (или просто PHP) - это серверный язык сценариев, предназначенный для веб-разработки, также используемый в качестве языка программирования общего назначения. PHP-код может быть встроен в HTML-код или его можно использовать в сочетании с различными системами веб-шаблонов, системами управления веб-контентом и веб-фреймворками. PHP-код обычно обрабатывается интерпретатором PHP, реализованным как модуль на веб-сервере или в качестве исполняемого файла Common Gateway Interface (CGI). Веб-сервер объединяет результаты интерпретируемого и исполняемого PHP-кода, который может представлять собой любой тип данных, включая изображения, с созданной веб-страницей. PHP-код также может быть выполнен с помощью интерфейса командной строки (CLI) и может использоваться для реализации автономных графических приложений. Стандартный PHP-интерпретатор, основанный на Zend Engine, является свободным программным обеспечением, выпущенным под лицензией PHP. PHP широко распространен и может быть развернут на большинстве веб-серверов и практически на всех операционных системах и платформах бесплатно. Язык PHP развивался без письменной официальной спецификации или стандарта до 2014 года, причем первоначальная реализация стала стандартом де-факто, который должен был следовать другим реализациям. С 2014 года продолжалась работа по созданию формальной спецификации PHP [4].
- В наши дни разработчикам необходимо создавать сложные веб-сайты и веб-приложения, если сложность выше среднего уровня сложности, то может потребоваться слишком много времени и хлопот всегда начинать с чистого листа, следовательно, возникла потребность в более структурированном естественном способе развития. Фреймворки PHP предоставляют разработчикам адекватное решение для этого.
- Преимущества фреймворков:
- Быстрая разработка приложений
- Обеспечение хорошо организованного, многоразового и поддерживаемого кода
- Позволяют приложениям масштабироваться в условиях роста
- Освобождают от хлопот о низкой безопасности сайта
- Следуют шаблону MVC (Model-View-Controller), который обеспечивает разделение представления и логики
- Продвигает современные методы веб-разработки, такие как инструменты объектно-ориентированного программирования
- PHP-код существует в виде сценариев, которые являются простыми текстовыми файлами, написанными вами. Интерпретатор PHP представляет собой часть программного обеспечения (ПО) вашего веб-сервера, который читает этот файл, видит в нем определенный смысл, а затем возвращает веб-серверу HTML -вывод и направление дальнейших действий или порядок интерпретации записей пользовательской формы. Текстовый файл интерпретируется построчно при каждом доступе к файлу [4, 20, 21].
- Проведем краткий обзор существующих фреймворков PHP.
- Laravel
- Проведем краткий обзор существующих фреймворков PHP.
- Не смотря на то, что Laravel относительно новый фреймворк PHP (он был выпущен в 2011 году), согласно недавнему онлайн-опросу Sitepoint, это самый популярный фреймворк среди разработчиков. В Laravel есть огромная экосистема с платформой для хостинга и развертывания, а на ее официальном веб-сайте есть много учебников по скринкастам под названием Laracasts. В Laravel есть много возможностей, которые позволяют быстро создавать приложения. Laravel имеет свой собственный легкий шаблонный движок под названием «Blade», элегантный синтаксис, которого облегчает задачи, которые вам часто нужно выполнять, такие как аутентификация, сеансы, очереди, кеширование и маршрутизация RESTful. Laravel также включает локальную среду разработки под названием Homestead, которая представляет собой обертку над Vagrant.[15]
- Symfony
- Компоненты структуры Symfony используются многими проектами, такими как CMS Drupal или программное обеспечение форума phpBB, даже Laravel — описываемый выше фреймворк - также разработан на основе Sympony. У Symfony есть широкое сообщество разработчиков и множество поклонников. Компоненты Symfony - это многоразовые библиотеки PHP, с которыми вы можете выполнять различные задачи, такие как создание форм, настройка объектов, маршрутизация, аутентификация, шаблонизирование и многие другие. Вы можете установить любой из компонентов с менеджером зависимостей PHP-компоновщика. На веб-сайте Symfony есть секция витрины, где вы можете заглянуть в разработчиков проектов, выполненных с помощью этого фреймворка.[24]
- Codeigniter
- CodeIgniter - это легкий фреймворк PHP, которому уже более 10 лет (выпущен в 2006 году). CodeIgniter имеет очень простой процесс установки, который требует только минимальной конфигурации, поелику он может сэкономить вам много времени. Это также идеальный вариант, для тех, кто хочет избежать конфликта версий PHP, так как он отлично работает практически на всех общих и выделенных хостинг платформах. CodeIgniter не строго придерживается паттерна проектирования MVC. Использование классов контроллера является обязательным, но Модели и Представления являются необязательными, вы можете использовать свои собственные правила кода и пространства имен, это свидетельствует о том, что CodeIgniter дает большую свободу разработчикам. Данный фреймворк занимает всего лишь около 2 МБ, поэтому это минималистичный фреймворк, но он позволяет добавлять сторонние плагины, если нужны более сложные функции.[9]
- Yii2
- При выборе фреймворка Yii, повышается производительность сайта, поскольку он быстрее, чем другие фреймворки PHP, это потому, что он широко использует ленивую загрузку. Yii 2 является чисто объектно-ориентированным, и он основан на концепции кодирования DRY , поэтому он предоставляет довольно чистый и логический код. Yii 2 интегрирован с jQuery, и он поставляется с набором функций с поддержкой AJAX, поэтому он может стать отличным выбором для тех, кто приходит из front-end разработки. Фреймворк Yii2 также имеет мощный генератор кода классов, называемый Gii, который облегчает объектно-ориентированное программирование, быстрое прототипирование и предоставляет веб-интерфейс, который позволяет интерактивно генерировать нужный код [26].
- 2.1.3 MySQL
- MySQL - система управления реляционными базами данных с открытым исходным кодом. Для проприетарного использования доступно несколько платных выпусков и предлагают дополнительную функциональность. MySQL является центральным компонентом стека программного обеспечения веб-приложений с открытым исходным кодом LAMP (и других стеков «AMP»). Приложения, использующие базу данных MySQL, включают в себя: TYPO3, MODx, Joomla, WordPress, Simple Machines Forum, phpBB, MyBB и Drupal. MySQL также используется во многих крупномасштабных веб-сайтах, включая Google, Facebook и другие.
- MySQL предлагается в двух разных версиях: сервер MySQL с открытым исходным кодом и собственный корпоративный сервер. MySQL Enterprise Server отличается от ряда проприетарных расширений, которые устанавливаются как серверные плагины, но в остальном разделяют систему нумерации версий и построены из той же базы кода. Основные возможности, доступные в MySQL 5.6:
- Широкий набор ANSI SQL 99, а также расширений
- Кросс-платформенная поддержка
- Хранимые процедуры используют процедурный язык, который строго придерживается SQL / PSM
- Триггеры
- Курсоры
- Обновляемые представления
- Online Data Definition Language (DDL) при использовании InnoDB Storage Engine
- Performance Schema, которая собирает и агрегирует статистику о выполнении сервера и производительности запросов для целей мониторинга
- Набор параметров режима SQL для управления временем выполнения, включая строгий режим для более строгого соблюдения стандартов SQL
- Поддержка X / Open XA распределенной обработки транзакций (DTP); двухфазное принятие как часть этого, используя механизм хранения InnoDB по умолчанию
- Транзакции с точками сохранения при использовании InnoDB Storage Engine по умолчанию. NDB Cluster Storage Engine также поддерживает транзакции
- Поддержка SSL
- Кэширование запросов
- Sub-SELECT (Вложенные SELECT)
- Встроенная поддержка репликации (Репликация master-master и репликация master-slave) с одним ведущим на ведомое устройство, с несколькими подчиненными устройствами на ведущее устройство.
- Полнотекстовое индексирование и поиск
- Встроенная библиотека базы данных
- Нативные накопители InnoDB, MyISAM, Merge, Memory (куча), федеративные, архивные, CSV, Blackhole, NDB Cluster
- Группирование команд, собирает несколько транзакций из нескольких соединений вместе, чтобы увеличить количество транзакций в секунду
- Из трех типов данных, временные данные – наиболее сложные с точки зрения создания и обработки [2, 18].
- 2.1.4 MongoDB
- MongoDB - это база данных документов, классифицированная как база данных NoSQL. Это означает, что вы можете хранить в нем документы JSON, и структура этих документов может меняться, поскольку она не строгая, в отличие от SQL. Это одно из преимуществ использования NoSQL, поскольку оно ускоряет разработку приложений и снижает сложность развертываний.
- Основные функции и преимущества:
- MongoDB поддерживает поиск полей, диапазона и поиск регулярных выражений. Запросы могут возвращать определенные поля документов, а также включать определенные пользователем функции JavaScript. Запросы также могут быть настроены для возврата случайной выборки результатов заданного размера.
- Поля в документе MongoDB могут индексироваться с использованием первичных и вторичных. Хотя вы можете напрямую взаимодействовать с Mongo с помощью Mongo Driver, Mongoose упростит это взаимодействие, позволяя вам моделировать отношения между данными и легко их проверять.ных индексов.
- MongoDB обеспечивает высокую доступность с наборами реплик. Набор реплик состоит из двух или более копий данных. Каждый член набора реплик может действовать в роли первичной или вторичной реплики в любое время. Все записи и чтения выполняются в основной реплике по умолчанию. Вторичные реплики сохраняют копию данных первичного с использованием встроенной репликации. Когда первичная реплика не выполняется, набор реплик автоматически проводит избирательный процесс, чтобы определить, какая из второстепенных должна стать основной. Вторичные версии необязательно должны выполнять операции чтения, но эти данные по умолчанию в конечном итоге согласуются [17].
- MongoDB масштабируется горизонтально, используя шардинг. Пользователь выбирает ключ шарда, который определяет способ распределения данных в коллекции. Данные разделяются на диапазоны (на основе ключа шарда) и распределяются по нескольким шардам. В качестве альтернативы, ключ шарда может быть хэширован, что обеспечивает равномерное распределение данных. MongoDB может работать на нескольких серверах, балансируя нагрузку или дублируя данные, чтобы поддерживать работу системы в случае сбоя оборудования.
- MongoDB можно использовать в качестве файловой системы GridFS с функциями балансировки нагрузки и репликации данных на нескольких компьютерах для хранения файлов. Эта функция, называемая файловой системой сетки, включена в драйверы MongoDB. MongoDB предоставляет разработчикам функции для обработки файлов и контента. Доступ к GridFS можно получить с помощью утилиты mongofiles или плагинов для Nginx и lighttpd. GridFS делит файл на части или фрагменты и сохраняет каждый из этих фрагментов как отдельный документ.
- MapReduce может использоваться для пакетной обработки данных и операций агрегации. Структура агрегации позволяет пользователям получать результаты, на подобие в SQL - GROUP BY. Операторы агрегирования могут быть объединены вместе, чтобы сформировать pipeline, аналогичный в Unix-подобных системах (рис. 2.2). Структура агрегации включает оператор $lookup, который может присоединяться к документам из нескольких документов, а также к статистическим операторам, таким как стандартное отклонение.
- JavaScript может использоваться в запросах, функциях агрегации (таких как MapReduce) и отправляться непосредственно в базу данных, для выполнения.
- MongoDB поддерживает коллекции фиксированного размера, которые называются закрытыми коллекциями. Этот тип коллекции поддерживает порядок вставки и, как только указанный размер достигнут, ведет себя как кольцевой буфер.
- Транзакции. Поддержка транзакций ACID с несколькими документами была добавлена в MongoDB версии 4.0 в июне 2018 года.
- Рисунок 2.2. Схема Pipeline в Unix-подобных системах
- Mongoose
- Mongoose - это библиотека моделирования объектных данных (ODM) для MongoDB и Node.js. Он управляет отношениями между данными, обеспечивает валидацию схемы и используется для транслирования между объектами в коде и представлением этих объектов в MongoDB (рисунок 2.3).
- Модель Mongoose является оберткой над схемой Mongoose. Схема Mongoose определяет структуру документа, значения по умолчанию, валидаторы и т.д., Тогда как модель Mongoose обеспечивает интерфейс к базе данных для создания, запроса, обновления, удаления записей и т.д.
- Mongoose имеет гибкий API и предоставляет множество способов решения задач. Большинство операций можно выполнить более чем одним способом либо синтаксически, либо через архитектуру приложения.
- Рисунок 2.3. Сопоставление объектов между Node и MongoDB, управляется через Mongoose
- Middleware - это функции, выполняемые на определенных этапах конвейера. Mongoose поддерживает промежуточное программное обеспечение (Middleware) для следующих операций:
- аггрегатор
- документ
- модель
- запрос
- Например, модели имеют функции pre (до) и post (после), которые принимают два параметра (рисунок 2.4):
- 1. Тип события ('init', 'validate', 'save', 'remove')
- 2. Обратный вызов, который выполняется с ссылкой на экземпляр модели
- Хотя вы можете напрямую взаимодействовать с Mongo с помощью Mongo Driver, Mongoose упростит это взаимодействие, позволяя вам моделировать отношения между данными и легко их проверять.
- Рисунок 2.4. Пример промежуточного ПО (pre, post hooks)
- 2.1.5 RESTful API
- REST — это архитектурный стиль, который определяет набор ограничений, которые используются для создания веб-сервисов. Веб-сервисы, соответствующие архитектурному стилю REST или веб-сервисам RESTful, обеспечивают взаимодействие между компьютерными системами в Интернете. REST-совместимые веб-службы позволяют запрашивающим системам получать доступ к текстовым представлениям веб-ресурсов и манипулировать ими, используя единый и предопределенный набор операций stateless. Другие виды веб-сервисов, такие как веб-службы SOAP, выставляют свои собственные произвольные наборы операций. «Веб-ресурсы» были сначала определены в World Wide Web как документы или файлы, идентифицированные URL-адресами. Однако сегодня они имеют гораздо более общее и абстрактное определение, которое охватывает все объекты или объекты, которые могут быть идентифицированы, названы, адресованы или обработаны каким-либо образом в Интернете. В веб-службе RESTful запросы, сделанные к URI ресурса, будут вызывать ответ с полезной нагрузкой, отформатированной в формате HTML, XML, JSON или в другом формате. Ответ может подтвердить, что некоторые изменения были внесены в хранимый ресурс, и ответ может предоставить гипертекстовые ссылки на другие связанные ресурсы или коллекции ресурсов. Когда используется HTTP, доступны операции GET, POST, PUT, DELETE и другие предопределенные CRUD HTTP-методы. Используя протокол без учета состояния и стандартные операции, системы REST нацелены на быструю производительность, надежность и способность к росту, путем повторного использования компонентов, которые можно управлять и обновлять, не затрагивая систему в целом, даже во время ее работы. Ограничения архитектурного стиля REST влияют на следующие архитектурные свойства:
- производительность в компонентных взаимодействиях, которая может быть основным фактором в восприятии пользователями производительности и эффективности сети;
- масштабируемость, позволяющая поддерживать большое количество компонентов и взаимодействий между компонентами;
- простота единого интерфейса;
- модифицируемость компонентов для удовлетворения меняющихся потребностей (даже когда приложение работает);
- видимость связи между компонентами с помощью сервисных агентов;
- переносимость компонентов путем перемещения программного кода с данными;
- надежность в сопротивлении сбоям на уровне системы при наличии сбоев в составе компонентов, разъемов или данных.
- API-интерфейсы веб-сервисов, которые соответствуют архитектурным ограничениям REST, называются RESTful API. API-интерфейсы RESTful на основе HTTP определяются со следующими аспектами:
- базовый URL-адрес, например http://api.example.com/resources;
- тип носителя, который определяет элементы данных перехода состояния. Текущее представление сообщает клиенту, как составлять запросы на переходы ко всем следующим доступным состояниям приложений. Это может быть так же просто, как URL-адрес или такой сложный, как Java-апплет;
- стандартные HTTP-методы (например, OPTIONS, GET, PUT, POST и DELETE) [7, 22].
- 2.1.6 HTTP 2.0
- HTTP/2 (изначально назывался HTTP/2.0) является основной версией сетевого протокола HTTP, используемого Всемирной паутиной. Он был получен из более раннего экспериментального протокола SPDY, первоначально разработанного Google. HTTP/2 был разработан рабочей группой httpbis протокола протокола Hypertext Transfer Protocol (где bis означает «второй»). Усилия по стандартизации поддерживались браузерами Chrome, Opera, Firefox, Internet Explorer 11, Safari, Amazon Silk и Edge. Большинство основных браузеров добавили поддержку HTTP/2 к концу 2015 года. Согласно W3Techs, по состоянию на август 2018 года 28,8% из лучших 10 миллионов сайтов поддерживали HTTP/2 .
- HTTP/2 имеет следующие ключевые функции по сравнению с HTTP/1.1:
- Бинарный протокол. Протокол HTTP/2 - это двоичный протокол. Это означает, что он намного эффективнее на проводе, однако, он больше не доступен для чтения человеком без использования инструментов для декодирования протокола.
- Мультиплексирование. HTTP/2 поддерживает мультиплексирование нескольких потоков по одному соединению. Это означает, что клиент может отправлять несколько запросов по одному и тому же соединению, и сервер может отвечать в любом порядке, когда ответы становятся доступными.
- Сжатие заголовка. HTTP-запросы и ответы обычно включают большое количество избыточных заголовков. HTTP/2 использует сжатие заголовка HPACK для значительного сжатия заголовков.
- Нагрузка сервера. Нагрузка сервера позволяет серверу отправлять дополнительные кэшированные ресурсы клиенту, которые клиент явно не запрашивал. Позволяет серверу предвидеть ресурсы, которые клиент запросит дальше, и отправить их заранее. За счет этого происходит экономия на запросах [25].
- 2.1.7 Паттерн проектирования MVC
- Model-view-controller - это архитектурный шаблон, обычно используемый для разработки пользовательских интерфейсов, которые делят приложение на три взаимосвязанные части. Это делается для разделения внутренних представлений информации от способов представления и принятия пользователем информации (рис. 2.5). Модель проектирования MVC отделяет эти основные компоненты, что позволяет эффективно использовать повторное использование кода и параллельную разработку. Традиционно используется на настольных ПК графических пользовательских интерфейсов (GUI), этот паттерн проектирования стал популярным для разработки веб-приложений и даже мобильных, настольных и других клиентов. Популярные языки программирования, такие как Java, C#, Ruby, PHP, имеют фреймворки MVC, которые используются в разработке веб-приложений прямо из коробки.
- Рисунок 2.5. Диаграмма взаимодействия через паттерн MVC
- Выделим ключевые компоненты паттерна MVC:
- Модель является центральной составляющей шаблона. Это динамическая структура данных приложения, независимо от пользовательского интерфейса. Она напрямую управляет данными, логикой и правилами приложения.
- Представление может представлять собой любое выходное представление информации, например диаграмму или диаграмму. Возможны множественные представления одной и той же информации, такие как гистограмма для управления и табличное представление для бухгалтеров.
- Контроллер принимает ввод данных и преобразует их в команды для модели или представления.
- В дополнение к делению приложения на три вида компонентов модели-представления-контроллера, также существует следующее взаимодействие между ними:
- Модель отвечает за управление данными приложения. Она получает пользовательский ввод от контроллера.
- Представление означает отрисовку модели в определенном формате.
- Контроллер отвечает на ввод пользователя и взаимодействует с объектами модели данных. Контроллер получает ввод, опционально проверяет его и затем передает ввод в модель [16].
- 2.2 Обзор средств разработки клиентской части портала
- Клиентская часть приложения - это практика преобразования данных в графический интерфейс для просмотра и взаимодействия пользователем с данными посредством цифрового взаимодействия с использованием HTML, CSS и JavaScript.
- 2.2.1 HTML 5
- HTML 5 — это язык разметки, используемый для структурирования и представления контента во Всемирной паутине. Это пятая и текущая основная версия стандарта HTML, а также XHTML. В настоящее время он существует в двух стандартизованных формах. HTML 5 был впервые выпущен в открытой форме 22 января 2008 года [6] с крупным обновлением и «Рекомендацией W3C» в октябре 2014 года. Его целью является улучшение языка с поддержкой новейших мультимедийных и других новых функций; чтобы язык был легко читаемым человеком и постоянно понимался компьютерами и устройствами, такими как веб-браузеры, парсеры и т.д., без жестких стандартов XHTML; а также оставаться обратно совместимым со старым программным обеспечением. HTML 5 включает подробные модели обработки, чтобы стимулировать более совместимые реализации; он расширяет, улучшает и рационализирует разметку, доступную для документов, и вводит интерфейсы программирования разметки и прикладного программирования (API) для сложных веб-приложений. По тем же причинам HTML 5 является кандидатом на кросс-платформенные мобильные приложения, поскольку он включает в себя функции, разработанные с учетом маломощных устройств. Включено много новых синтаксических функций. Чтобы изначально включать и обрабатывать мультимедийный и графический контент, были добавлены новые элементы
- Тем не менее, реальные плюсы спецификации HTML 5 — это новые интерфейсы прикладного программирования (API), каждый из которых является многообещающим новым продуктом для веб-пользователей и разработчиков. Подобно тому, как более ранние версии HTML позволяли создавать изображения на веб-сайтах, HTML 5 включает в себя систему для встраивания видео, без надобности медленных подключаемых модулей, таких как Adobe Flash. HTML 5 также приносит с собой огромную коллекцию инструментов, которые делают редактирование текста проще. Изображения и элементы страницы можно перетаскивать и удалять, например, значки на рабочем столе. Веб-разработчики могут добавлять область рисования всего лишь одной-двумя строчками кода. Такие инструменты облегчают жизнь веб-разработчиков, а их сложные веб-сайты становятся более чистыми. HTML 5 также позволяет сайтам, таким как Gmail хранить данные в автономном режиме, на вашем жестком диске, чтобы они могли продолжать работать без подключения к Интернету. На устройствах, поддерживающих местоположение, сайты HTML5 также могут получить доступ к информации GPS, что особенно полезно в мобильных браузерах. Стандарт также представляет стандартизованную систему для закладок, которая может передаваться между браузерами. С этими новыми возможностями возникают проблемы с безопасностью, но в спецификации это предусмотрено: пользователей спрашивают, прежде чем браузеры могут запросить информацию о местоположении или использовать пространство на жестком диске [10, 11].
- 2.2.2 CSS (Каскадные таблицы стилей)
- Каскадные таблицы стилей, называемые CSS, - это простой язык дизайна, предназначенный для упрощения процесса представления веб-страниц. CSS обрабатывает внешний вид веб-страницы. Используя CSS, можно контролировать цвет текста, стиль шрифтов, расстояние между абзацами, размер и расположение столбцов, какие фоновые изображения или цвета используются, макеты, варианты отображения для разных устройств и размеры экрана а также множество других эффектов. CSS обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS сочетается с языками разметки HTML или XHTML. Преимущества CSS:
- CSS экономит время — можно написать CSS один раз, а затем повторно использовать один и тот же код на нескольких HTML-страницах. можно определить стиль для каждого элемента HTML и применить его на столько веб-страницах, сколько поднадобится.
- Загрузка страниц происходит быстрее. При использовании CSS, не нужно каждый раз писать атрибуты HTML-тегов. Просто надо написать одно правило CSS тега и применить его ко всем вхождениям этого тега. Таким образом, меньше кода означает более быстрое время загрузки.
- Простое обслуживание. Чтобы сделать глобальные изменения, просто надо изменить стиль, и все элементы на всех веб-страницах будут обновляться автоматически.
- Оригинальные стили для HTML — CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому можно придать вид лучше HTML-странице по сравнению с атрибутами HTML.
- Совместимость с несколькими устройствами. Таблицы стилей позволяют оптимизировать контент для более чем одного типа устройств. Используя тот же HTML-документ, различные версии веб-сайта могут быть представлены для мобильных устройств, таких как КПК, мобильные телефоны, или для печати.
- Глобальные веб-стандарты. Теперь атрибуты HTML устарели, и рекомендуется использовать CSS. Поэтому рекомендуется начать использовать CSS во всех HTML-страницах, чтобы сделать их совместимыми с будущими версиями браузеров.
- Offline Browsing - CSS может хранить веб-приложения локально с помощью автономного кеша. Используя эту возможность, мы можем просматривать сайты офлайн. Кэш также обеспечивает более быструю загрузку и лучшую общую производительность веб-сайта.
- Независимость платформы — сценарий обеспечивает независимость платформы и может поддерживать и новейшие браузеры.
- CSS предлагает для целей оформления сайта обширный набор мощных команд форматирования, которые позволяют назначать шрифты, цвет, размеры, межстрочный интервал и другие свойства и атрибуты, которые оказывают влияние на визуальное восприятие как отдельных элементов веб-страницы (заголовков, маркированных списков, обычных абзацев текста), так и всей веб-страницы, сайта вцелом [10].
- 2.2.3 JavaScript
- JavaScript, часто сокращается как JS, является высокоуровневым, интерпретируемым языком программирования. Этот язык также характеризуется как динамический, слабо типизированный, прототипный и мультипарадигменный. Наряду с HTML и CSS JavaScript является одной из трех основных технологий
- Всемирной паутины. JavaScript позволяет создавать интерактивные веб-страницы и, таким образом, является неотъемлемой частью веб-приложений. Подавляющее большинство веб-сайтов используют его, и у всех основных веб-браузеров есть специальный Движок JavaScript для его выполнения. В качестве языка мультипарадигменного JavaScript поддерживает основанные на событиях, функциональные и императивные (в том числе объектно-ориентированные и прототипные) стили программирования. Он имеет API для работы с текстом, массивами, датами, регулярными выражениями и базовыми манипуляциями с DOM, но сам язык не включает никаких операций ввода-вывода, таких как сети, хранилища или графические объекты. Изначально была реализована только клиентская сторона в веб-браузерах, но теперь механизмы JavaScript встроены во многие другие типы программ, включая серверную часть на веб-серверах и в базах данных, а также не в веб приложениях, таких как текстовые процессоры и программное обеспечение PDF, и во время выполнения среды, которые делают JavaScript доступным для написания мобильных и настольных приложений, включая виджеты рабочего стола. Хотя между JavaScript и Java существует сильное внешнее сходство, включая название языка, синтаксис и соответствующие стандартные библиотеки, эти два языка отличаются друг от друга и сильно различаются по дизайну.
- Чтобы представлять хоть какой-то интерес, каждый язык программированя должен иметь свою платформу, или стандартную библиотеку, или API функций для выполнения таких базовых операций, как ввод и вывод. Ядро языка JavaScript определяет минимальный прикладной интерфейс для работы с текстом,массивами, датами и регулярными выражениями, но в нем отсутствуют операции ввода-вывода.[13, 14].
- 2.2.4 Bootstrap 4. CSS фреймворк
- Bootstrap — бесплатный front-end фреймворк (библиотека) с открытым исходным кодом для разработки веб-сайтов и веб-приложений. Он содержит шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, навигации и других компонентов интерфейса, а также дополнительные расширения JavaScript. В отличие от многих веб-фреймворков, он относится только к интерфейсной разработке.
- В Bootstrap 4 есть много новых интересных функций и возможностей, которые помогают писать отзывчивые приложения еще прощу, чем раньше. Самым большим дополнением является то, что он построен на Flexbox.
- Отметим основные возможности Bootstrap 4:
- Быстрое прототипирование. Существует множество других инструментов и фреймворков, которые быстро создают прототипы. Например, Bulma и Materialize. Bootstrap является равным соперником. Многие утверждают, что им не нужны другие функции фреймворка. Тем не менее, Bootstrap позволяет настраивать и выбирать модули удобные пользователю.
- Отзывчивый веб-дизайн.
- Старая кодовая база. Bootstrap 4 поддерживает как новую спецификацию кода, так и старую спецификацию предыдущих версий.
- Большая простота настройки. Новый Bootstrap 4 намного проще настроить под свои нужды.
- Flex gridbox. Сетка Flex для разметки страницы.
- Переход от Less к Sass.
- 2.3 Безопасность приложения
- Безопасность данных разрабатываемого портала должна стоять на первом месте, так как пользователи будут хранить персональные данные на нашем сервере, производить оплату и отслеживать личные посылки.
- 2.3.1 Хеш функция
- Хеш-функция - это любая функция, которая может использоваться для сопоставления данных произвольного размера с данными фиксированного размера. Значения, возвращаемые хэш-функцией, называются хеш-значениями, хеш-кодами, дайджестами или просто хэшами. Хэш-функции часто используются в сочетании с хеш-таблицей, общей структурой данных, используемой в компьютерном программном обеспечении для быстрого поиска данных. Хэш-функции ускоряют поиск таблиц или баз данных путем обнаружения дублированных записей в большом файле. Одним из таких приложений является нахождение подобных участков в последовательностях ДНК. Они также полезны в криптографии. Криптографическая хеш-функция позволяет легко проверить, что входные данные сопоставляются с заданным значением хэша, но если входные данные неизвестны, умышленно трудно восстановить их (или любые эквивалентные альтернативы), зная сохраненное значение хэш-функции. Это используется для обеспечения целостности передаваемых данных и является строительным блоком для HMAC, которые обеспечивают аутентификацию сообщений. Хэш-функции связаны с контрольными суммами, проверяют цифры, отпечатки пальцев, сжатие с потерями, функции рандомизации, коды исправления ошибок и шифры. Хотя концепции в определенной степени сходны, каждый из них используется по-своему, разрабатывается и оптимизируется по-разному.
- 2.3.2 Протокол SSL
- SSL (Secure Sockets Layer) - это стандартная технология безопасности для установления зашифрованной связи между веб-сервером и браузером. Такая ссылка гарантирует, что все данные, передаваемые между веб-сервером и браузерами, остаются конфиденциальными и целостными. SSL является отраслевым стандартом и используется миллионами сайтов для защиты своих онлайн-транзакций со своими клиентами. Чтобы иметь возможность создавать SSL-соединение, веб-серверу требуется сертификат SSL. Когда SSL активирован на своем веб-сервере, будет необходимо заполнить ряд вопросов о владельце вашего сайта и вашей компании. Затем ваш веб-сервер создает два криптографических ключа - закрытый ключ и открытый ключ. Открытый ключ не обязательно должен быть секретным и помещается в запрос подписи сертификата (CSR) - файл данных, содержащий ваши данные. Затем необходимо представить CSR. Во время процесса сертифицирования, SSL-сертификата, центр сертификации будет проверять данные и выдавать SSL-сертификат, содержащий идентификационные данные сайта, и разрешать использование SSL. Веб-сервер будет соответствовать выданному SSL-сертификату и приватному ключу. Затем веб-сервер сможет установить зашифрованную связь между веб-сайтом и веб-браузером пользователя. Сложности протокола SSL остаются незаметными для пользователя. Вместо этого их браузеры предоставляют им ключевой индикатор, чтобы сообщить им, что в настоящее время они защищены SSL-зашифрованным сеансом - значок блокировки в нижнем правом углу, щелчок по значку блокировки отображает сертификат SSL и сведения о нем. Все SSL-сертификаты выдаются либо компаниям, либо юридически подотчетным лицам. Обычно сертификат SSL содержит доменное имя, название компании, адрес, город, государство и страну. Он также будет содержать дату истечения срока действия Сертификата и сведения о сертификационном органе, ответственном за выдачу сертификата. Когда браузер подключится к защищенному сайту, он получит SSL-сертификат сайта и проверит, что он не истек, и был выпущен центром сертификации, которому доверяет браузер, а также, что он используется веб-сайтом, для которого он был выпущен. Если одна из этих проверок будет отрицательной, то браузер выведет предупреждение конечным пользователям, сообщив им, что сайт не защищен SSL [23].
- 2.4 Интеграция с API сторонних разработчиков
- Для инеграции с API сторонних разработчиков, для портала, необходимо будет подключать открытые библиотеки от google, yandex и ГдеПосылка.API.
- 2.5 Выводы в выборе средств программной разработки
- На основании проведенного анализа средств разработки, было принято следующее решение.
- При разработке серверной части портала решено использовать языки программирования: PHP, Javascript. Базы данных: MySQL, MongoDB. Фреймворки: Laravel, Node.js. Для разработки API: архитектура REST.
- Для разработки клиентской части было решено использовать: HTML5,CSS, bootstrap 4, jQuery.
- Как наиболее подходящий под задачу был выбран паттерн проектирования MVC.
- Для целей безопасности, было решено воспользоваться хешированием паролей, установкой протокола SSL и модулем системы «антиспам».
- Для интеграции сторонних API было решено использовать открытые API: google, yandex, gdeposylka.ru.
- ГЛАВА 3. ПРАКТИЧЕСКАЯ РЕАЛИЗАЦИЯ РАЗРАБОТКИ ПОРТАЛА
- 3.1 Моделирование баз данных
- Для проектирования базы данных было решено использовать две СУБД: MySQL и MongoDB. Для базового функционирования приложения, регистрации и авторизации пользователей, было создано 6 таблиц в MySQL (рис. 3.1).
- Рисунок 3.1. Схема баз данных MySQL портала
- В этих таблицах будет хранится информация о пользователях сервиса, личные данные в зашифрованном виде, информация о платежах и заказах клиента. Вторая часть баз данных будет хранится в MongoDB и представляет собой коллекции данных, без необходимости создания таблиц и типов данных заранее. В будущем такой подход поможет для масштабирования проекта.
- 3.2 Серверная часть с использованием языка PHP
- Для написания серверной основной части портала было решено воспользоваться фреймворком «Laravel». На главной странице размещены кнопки регистрации и входа. Регистрация происходит с помощью «Laravel» контроллера «Auth». При содействии модели User, данные записываются в базу данных, пароль хешируется с помощью функции SHA-256 (рис. 3.2).
- Рисунок 3.2. Хеширование пароля перед сохранением в БД
- После регистрации, пользователю будет предложено пройти авторизацию с помощью формы (рис. 3.3). Стоит отметить, что авторизация выполняется с прикрепленным CSRF токеном, который генерируется на сервере, что увеличивает безопасность и снижает возможность несанкционированного доступа.
- Рисунок 3.3. Форма входа для зарегистрированных пользователей
- 3.3 Имплементация кода для REST API на Node.js
- REST API было решено писать на фреймворке для языка JavaScript — Node.js. Базовая маршрутизация выглядит следующим образом:
- Таблица 1
- Маршрутизация REST части приложения
- HTTP метод
- Маршрут
- POST
- /api/authenticate
- GET
- /api/packages
- POST
- /api/packages
- GET
- /api/packages/:id
- Продолжение табл.1
- PUT
- /api/packages/:id
- DELETE
- /api/packages/:id
- POST
- /api/auth/register
- GET
- /api/auth/me
- POST
- /api/auth/login
- GET
- /api/auth/logout
- По вышеописанным маршрутам строится бизнес логика REST API приложения. Так, пользователь может зарегистрироваться, после чего ему будет выдан токен, с помощью которого, пользователь может выполнять все последующие действия. По маршрутам пользователь может создать, просмотреть, изменить или удалить посылку. Все данные хранятся в базе данных MongoDB. Для защиты API был использован JWT.
- 3.4 Личный кабинет клиента
- После успешной авторизации, пользователь попадает на страницу личного кабинета. В личном кабинете, пользователь может создавать заказы, отслеживать уже существующие посылки, редактировать профиль и личные данные (рис. 3.4). Также в личном кабинете будет возможность рассчитать стоимость доставки от виртуального адреса в Турции на выбранный адрес с помощью интегрированного API от логистической компании.
- Пользователь может оплатить услуги с помощью интегрированного API «interkassa».
- Автоматизация процессов происходит скрыто от пользователя. Когда заказ регистрируется, то ему присваивается статус «в ожидании», после того как менеджер получил заказ на склад, он меняет статус заказа на «на складе». После этого, если клиент оплатил посылку, то статус посылки в личном кабинете меняется на «оплачено», о чем менеджер получает уведомление, и меняет статус заказа на «пакуется». Когда заказ запакован и отправлен пользователю — статус снова меняется на «отправлено», и заказу присваивается номер отслеживания, который дается посредством API логистической компании. По номеру отслеживания пользователь сможет проследить путь посылки, с помощью API «gdeposylka.ru».
- Рисунок 3.4. Интерфейс личного кабинета разрабатываемого портала
- 3.5 Дизайн и верстка
- Для реализации дизайна и верстки была выбрана последняя,четвертая, версия CSS фреймворка «Bootstrap». Дизайн производился по стандартной двенадцати колоночной схеме. Верстка осуществлялась в соответствии с предустановленными классами «Bootstrap». В шапке портала находится меню, с кнопкой поиска и ссылками на регистрацию и вход. На главной странице находится слайдер, анимированные блоки с картинками, js фильтр по категории. В футере представлены ссылки на социальные сети, оформленные через кастомизированные иконки. Шапка и футер сайта представляют собой отдельные блоки, подключаемые к основному контенту портала, и следуют парадигме модульности. Так как работа не преследует цели создать новый дизайн, было решено придерживаться минимальных современных требований в дизайне и верстке.
- 3.6 Апробация
- По выбранным критериям сравнения, был проведен сравнительный анализ. Результаты тестирования прототипа были сделаны на основе близких к реальным данным.
- Таблица 2
- Сводная таблица характеристик аналогов
- Критерий
- Tevipo.com
- Shopfans.ru
- Qwintry.com
- Pochtoy.com
- Разрабатываемый ресурс
- Автоматизация
- Нет
- Есть
- Есть
- Нет
- Есть
- Юзабилити
- 91% с ошибками
- 9% с ошибками
- 45% с ошибками
- 18% с ошибками
- 18% с ошибками
- SEO оптим
- изация
- 25/100
- 61/100
- 49/100
- 29/100
- 40/100
- Функциональность
- Без инеграции API
- С интеграцией API
- С интеграцией API
- Без инеграции API
- С интеграцией API
- Скорость загрузки (сек)
- 0,581813
- 1,415763
- 0,344281
- 1,046455
- 0,131965
- Наличие своего API
- Нет
- Нет
- Да
- Нет
- Да
- Комиссия сервиса
- 10% (от общей стоимости заказа)
- 5$ за посылку
- 8% (от общей стоимости заказа)
- 6% (от общей стоимости заказа)
- Нет
- В результате тестирования по указанным критериям, были сделаны следующие выводы:
- У некоторых аналогов не осуществлена полная автоматизация процессов, заказы обрабатываются вручную по ссылке, оставленной пользователем. На разрабатываемом ресурсе, администратор системы может менять статус заказов, а номер отслеживания выдается через API логистической компании.
- В результате тестов на юзабилити, было выявлено 9 страниц с ошибками на сервисе аналога, и 4 страницы на разрабатываемом сервисе
- Результаты тестов на SEO оптимизацию показали, что даже на стадии разработки прототипа, наш ресурс показал лучшие результаты, чем сравниваемые аналоги.
- На сайте сервиса аналога не имеется интеграции с API сторонних разработчиков, такой как отслеживание посылки.
- Скорость загрузки главной страницы (тестирование проводилось с сервера в Санкт-Петербурге) примерно от 2 до 4 раз быстрее на разрабатываемом ресурсе.
- У нескольких рассматриваемых аналогов нет своего API для работы с магазинами напрямую. Это не дает возможности развития и масштабируемости приложения. Интернет магазины не могут разместить модуль доставки в Россию на своем сайте. В разрабатываемом приложении создан базовый прототип API на Node.js.
- 3.7 Выводы
- Подводя итоги главы, можно утверждать, что разрабатываемый сервис превосходит некоторые аналоги по вышеописанным критериям. Был описан процесс проектирования и внедрения практической части разрабатываемого сервиса. Была спроектирована реляционная база данных. Написан и протестирован программный код с помощью фреймворка Laravel. На базе Node.js была написана часть REST API приложения. Также была внедрена методология проектирования сервиса форвардера.
- ЗАКЛЮЧЕНИЕ
- В результате применения существующих современных методов и средств разработки был получен новый сервис с автоматизацией внутренних процессов. Также, в результате работы, был разработан базовый API для интернет магазинов. В сервис были интегрированы API сторонних разработчиков, для упрощения работы администратора с ресурсом.
- Таким образом в работе были применены существующие современные методы и средства, был получен новый результат. Успешно разработана и применена методология интеграции API при разработке сервиса форвард услуг. Улучшена скорость обработки запросов.
- Из этого следует, что конечному пользователю будет удобнее, быстрее и приятнее работать с нашим ресурсом, чем с аналогичными ресурсами в данной области.
- Список использованных источников
- 1. Гост 28195-99. Иерархическая модель качества программных средств (характеристики и подхарактеристики). [Текст].
- 2. Бьюли, А. Изучаем SQL [Текст] — Символ Плюс, 2007 —140 с.
- 3. Макфарланд, Д. Большая книга CSS3. 3-е издание [Текст] — Питер, 2014.
- 4. Маклафлин, Б. PHP и MySQL. Исчерпывающее руководство [Текст] — Питер, 2013.
- 5. Флэнаган, Д. JavaScript. Подробное руководство. Шестое издание [Текст] — Символ Плюс, 2012.
- 6. Статья – №01(2)[Текст], Программные системы и вычислительные методы, 2013.
- 7. Patni, S. Pro RESTful APIs, Design, Build and Integrate with REST, JSON, XML and JAX-RS: [Текст] — Apress, 2017.
- 8. Протокол без сохранения состояния: [Электронный документ]. - (https://goo.gl/WB8ubj). Проверено 15.08.2018.
- 9. Codeigniter: [Электронный документ]. - (https://ru.wikipedia.org/wiki/CodeIgniter). Проверено 10.09.2018
- 10. HTML 5A vocabulary and associated APIs for HTML and XHTML: [Электронный документ]. - (https://goo.gl/n2tWkj). Проверено 15.08.2018.
- 11. HTML5: [Электронный документ]. - (https://ru.wikipedia.org/wiki/HTML5). Проверено 10.09.2018.
- 12. HTTP/2: [Электронный документ]. - (https://ru.wikipedia.org/wiki/HTTP/2). Проверено 10.09.2018.
- 13. JavaScript: [Электронный документ]. -(https://ru.wikipedia.org/wiki/JavaScript). Проверено 10.09.2018.
- 14. JavaScript Everywhere and the Three Amigos: [Электронный документ]. - (https://goo.gl/PuYQTU). Проверено 15.08.2018
- 15. Laravel: [Электронный документ]. - (https://ru.wikipedia.org/wiki/Laravel). Проверено 10.09.2018
- 16. Model-View-Controller: [Электронный документ]. - (https://ru.wikipedia.org/wiki/Model-View-Controller). Проверено 10.09.2018.
- 17. MongoDB: [Электронный документ]. - (https://ru.wikipedia.org/wiki/MongoDB). Проверено 10.09.2018.
- 18. MySQL: [Электронный документ]. - (https://ru.wikipedia.org/wiki/MySQL). Проверено 10.09.2018.
- 19. Node.js: [Электронный документ]. - (https://ru.wikipedia.org/wiki/Node.js). Проверено 10.09.2018
- 20. PHP: [Электронный документ]. - (https://ru.wikipedia.org/wiki/PHP). Проверено 15.08.2018.
- 21. PHP gets a formal specification, at last: [Электронный документ]. - (https://goo.gl/e1FQAL). Проверено 15.08.2018.
- 22. REST: [Электронный документ]. - (https://ru.wikipedia.org/wiki/REST). Проверено 10.09.2018.
- 23. SSL: [Электронный документ]. - (https://ru.wikipedia.org/wiki/SSL). Проверено 10.09.2018.
- 24. Symfony: [Электронный документ]. - (https://ru.wikipedia.org/wiki/Symfony). Проверено 10.09.2018
- 25. Usage of HTTP/2 for websites: [Электронный документ]. - (https://goo.gl/Df95us). Проверено 15.08.2018.
- 26. Yii2: [Электронный документ]. - (https://ru.wikipedia.org/wiki/Yii). Проверено 15.08.2018.
Статистика использования
Количество обращений: 108
За последние 30 дней: 0 Подробная статистика |