Разработка программного модуля клиентской части интернет-магазина продажи спортивных товаров | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 29 июня, печатный экземпляр отправим 3 июля.

Опубликовать статью в журнале

Автор:

Научный руководитель:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №15 (514) апрель 2024 г.

Дата публикации: 09.04.2024

Статья просмотрена: 22 раза

Библиографическое описание:

Лаврушкин, Ю. А. Разработка программного модуля клиентской части интернет-магазина продажи спортивных товаров / Ю. А. Лаврушкин. — Текст : непосредственный // Молодой ученый. — 2024. — № 15 (514). — С. 48-51. — URL: https://moluch.ru/archive/514/112803/ (дата обращения: 15.06.2024).



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

Ключевые слова: интернет-магазин, сайт, SEO-оптимизация, JWT, поисковая выдача.

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

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

Для продвижения бизнеса онлайн-торговли очень важно сделать сайт доступным во всех поисковых системах. Для решения этой задачи необходимо провести всестороннее развитие и продвижение сайта с целью попадания наверх в результатах поисковой выдачи, или провести SEO-оптимизацию. SEO (Search Engine Optimization) — это комплекс мероприятий по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей [1].

Для успешного SEO-продвижения сайта необходимо:

– составить семантическое ядро, соответствующее тематике сайта;

– провести техническую оптимизацию: проработать структуру сайта, добавить полезный тематический контент, прописать мета-теги (заголовки h1-h6, title, description);

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

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

Разрабатываемый программный модуль должен обеспечить выполнение следующих функций:

– регистрация пользователя;

– авторизация пользователя;

– отображение главной страницы сайта с рекламными баннерами, новинками, акциями, категориями, брендами, хэдером и футером;

– поиск в каталоге товаров;

– отображение списка всех категорий товаров;

– фильтрация товаров;

– сортировка товаров;

– просмотр детальной карточки товара;

– хранение в хранилище браузера корзины неавторизованного пользователя;

– просмотр избранных товаров;

– выбор страны и адреса доставки;

– отображение страницы созданного заказа;

– возможность повторить заказ;

– отображение списка всех заказов;

– обработка ошибок входных данных, введенных пользователем.

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

В качестве языка программирования был выбран JavaScript. Было принято решение разрабатывать модуль на основе веб-фреймворка Nuxt [2]. Nuxt — это фреймворк для создания универсальных приложений на Vue.js. Он предоставляет набор инструментов и паттернов, которые помогают разработчикам быстро создавать веб-приложения с использованием Vue.js, включая серверный рендеринг, статическое генерирование и другие продвинутые функции. Nuxt включает в себя поддержку SSR, что позволяет генерировать HTML на сервере для каждой страницы перед отправкой клиенту. Это улучшает производительность и оптимизацию для поисковых систем. Nuxt обладает расширяемой архитектурой, которая позволяет легко интегрировать сторонние модули и плагины для добавления новой функциональности и улучшения разработки.

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

Основные варианты взаимодействия:

  1. Авторизация/Регистрация. Пользователь может создать новый аккаунт или войти в существующий.
  2. Оформление заказа. Пользователь может оформить заказ, пройдя последовательно все шаги, показанные на диаграмме.
  3. Выход из аккаунта. Пользователь может выйти из своего аккаунта, нажав на соответствующую кнопку в личном кабинете.

Use case диаграмма

Рис. 1. Use case диаграмма


Рассмотрим алгоритм авторизации/регистрации пользователя, представленного на рис. 2.

При регистрации пользователь отправляет запрос на сервер с данными для создания учетной записи. Сервер создает учетную запись пользователя и сохраняет ее в базе данных, хешируя пароль для безопасного хранения. Для аутентификации пользователь вводит свои учетные данные на клиентской стороне, которые отправляются на сервер. Сервер проверяет учетные данные, и при успешной аутентификации генерирует JWT токен, содержащий идентификатор пользователя или другую информацию, который возвращается клиенту [3].

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

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

Алгоритм авторизации/регистрации

Рис. 2. Алгоритм авторизации/регистрации

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

Литература:

1. Симонова В. Р., Сазонов С. Ю. Понятия и применения seo-оптимизации //Информационные системы и технологии. — 2018. — С. 110–111.

2. Kok L. T. Hands-on Nuxt. js Web Development: Build universal and static-generated Vue. js applications using Nuxt. js. — Packt Publishing Ltd, 2020.

3. Jones M., Bradley J., Sakimura N. Json web token (jwt). — 2015. — №. rfc7519.

Основные термины (генерируются автоматически): JWT, пользователь, поисковая выдача, сервер, HTML, SEO, SSR, алгоритм авторизации, локальное хранилище браузера, розничная торговля.


Ключевые слова

сайт, интернет-магазин, JWT, SEO-оптимизация, поисковая выдача

Похожие статьи

Задать вопрос