Активация и управления лицензионными ключами ПО

Рассмотрим регистрацию пользователей AdVantShop.NET

• Регистрация  и вход в личный кабинет
• Личный кабинет

Регистрация и вход в личный кабинет

Для регистрации AdVantShop.NET нажимаем "Начать бесплатно", вводим email и пароль, нажимаем зарегистрироваться (рис.1).

Рисунок 1.

На следующем этапе вводим персональные данные и кнопку "Сохранить" и продолжить (рис.2).

Рисунок 2.

Далее будет несколько этапов по указанию данных будущего проекта: сайт или  ресторан (рис.3).

Рисунок 3.

сайт или приложение (рис.4).

Рисунок 4.

тип работы (рис.5).

Рисунок 5.

сколько сотрудников (рис.6).

Рисунок 6.

сколько товаров (рис.7).

Рисунок 7.

После указания всех настроек сразу происходит переход в созданный сайт или приложение.

Чтобы попасть в личный кабинет пользователя AdVantShop.NET необходимо на сайте advnatshop.net пройти по ссылке “Войти” и указать данные логин и пароль, которые указывали при регистрации (рис.8).

Рисунок 8.

Далее рассмотрим, что доступно в личном кабинете.

Личный кабинет

В личном кабинете доступны список проектов, управление данными проектами и управление вашими данными.

Мои проекты

При входе в личный кабинет по умолчанию открыта страница "Мои проекты". На данной вкладке виден список проектов: магазины, маркетплейсы или приложения. Также доступно создание нового проекта по кнопке "Создать новый проект", и управление имеющимися проектами. Напротив каждого проекта по кнопке "Подробно" осуществляется переход в управление проектом (рис.10).

Рисунок 10.

В управлении проектом можно перейти в панель управления проектом (рис.11, п.1), посмотреть номер проекта и тарифный план (рис.11, п.2), оплатить работу проекта (рис.11, п.3), подключить домен и сертификат (рис.11, п.4,5,6), подключить модули (рис.11, п.7) и т.д.

Рисунок 11.

Дополнительные сервисы

На вкладке "Дополнительные сервисы" после перевода проекта в платный режим можно подключить дополнительные сервисы по рассылке писем, условия по подключению описаны на данной странице (рис.12).


Рисунок 12.

Договор и документы

Договор на приобретение ПО AdVantShop.NET осуществляется по средствам активации аккаунта на физическое или юридическое лицо и заключением договора публичной оферты.
На вкладке "Договор и документы" описан порядок получения оригиналов документов, доступны сами документы, можно изменить данные лица (юридическое или физическое), изменить данные владельца, изменить email (рис.13).

Рисунок 13.

Данные пользователя

На вкладке "Данные пользователя" можно изменить свои личные данные такие как имя, телефон, email, адрес, добавить дополнительные email и номера для уведомлений (рис.14).

Рисунок 14.

Автоплатеж

Для работы проектов необходимо поддерживать положительный баланс. Чтобы избежать отрицательного баланса есть возможность подключить "Автоплатеж" для проектов посредством привязки карты в личном кабинете на вкладке "Автоплатеж".

Процесс подключения подписан на этой же странице указан номер клиента (рис.15).

Рисунок 15.

На главной странице личного кабинета владельца магазина указан номер клиента. Этот номер необходим, например, при обращении в службу поддержки (рис.16).

Рисунок 16.

Также можно пополнить баланс по кнопке “Пополнить баланс” (рис.17).

Рисунок 17.

Описание технических средств

Эта инструкция описывает шаги по установке зависимостей и компиляции проекта на операционной системе Ubuntu 24.0. Проект также можно скомпилировать на других платформах, таких как macOS и Linux, следуя аналогичным шагам.

Шаг 1: Подготовка системы

Убедитесь, что ваш компьютер работает под управлением операционной системы Ubuntu 24.0. Рекомендуется обновить систему до последней версии для оптимальной работы инструментов. Минимальные требования к системе:

Требование	Минимум	Рекомендуется
Процессор	2 ядра	4 ядра
Оперативная память	4 Гигабайта	8 Гигабайт

NodeJS поддерживает 64-битную версию Ubuntu 20.04 или более позднюю.

Версия для Linux требует наличия библиотек, совместимых с glibc 2.28. Это означает, что дистрибутивы должны быть не ниже RHEL 8, Ubuntu 20.04 или Debian 10.

На macOS потребуется минимум версия macOS 10.15 (Catalina).

Шаг 2: Установка Node JS (версия 22.11.0)

1. Перейдите на официальный сайт Node JS и скачайте версию 22.11.0 https://nodejs.org/en/download/prebuilt-installer
2. Выберете удобный способ установки
3. Установим с помощью apt репозитория
4. Вызовем команды

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash

sudo apt install -y nodejs

5. Проверяем успешность установки командой

node -v

Должны увидеть текущую версию NodeJS

Шаг 3: Установка пакетного менеджера pnpm (9.X)

1. Перейти на официальный сайт pnpm и проследовать инструкции по установке https://pnpm.io/installation
2. Для Ubuntu достаточно вызвать команду

sudo npm install -g pnpm

Шаг 4: Клонирование или загрузка проекта

Скачайте проект по ссылке

https://www.advantshop.net/files/advantshop/website_sources.zip и

разархивируйте его в удобное место на вашем компьютере, например, в папку

~/website/

Шаг 5: Установка зависимостей

Для установки зависимостей необходимо вызвать команду в директории проекта

pnpm -r install --frozen-lockfile

Шаг 6: Компиляция исходного кода

Для компиляции используется команда

pnpm -r build

Шаг 7: Подготовка источника данных ApiDataContract

Необходимо создать файл .env по пути packages/website/.env и заполнить в нем

APIKEY=ключ доступа к API
APIURL=ссылка на API

Тестовые доступы
APIKEY=a1e91a3be9227233e8289241bef158df8fdf8cdd9a92057a357b968df7cb62a4
APIURL=https://astro.advantshop.tech/api/

Шаг 8: Запуск проекта локально

Для запуска в режиме разработки используется команда

pnpm -F website dev

Шаг 9: Открыть сайт

Теперь достаточно открыть сайт в браузере по адресу https://localhost:4321

Инструкция по запуску проекта

Эта инструкция описывает шаги по запуску проекта на Linux сервере Ubuntu 24

Шаг 1: Установка NodeJS

С помощью терминала поставить на сервер NodeJS 22.X

curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash

sudo apt install -y nodejs

Шаг 2: Установить PM2

PM2 (Process Manager 2) — это менеджер процессов для Node.js Он помогает поддерживать приложения на Node.js в рабочем состоянии, автоматически перезапуская их в случае сбоев

Установить его можно с помощью команды

sudo npm install -g pm2

Шаг 3: Загрузка собранного проекта

Скачать архив с собранным проектом можно по ссылке

https://www.advantshop.net/files/advantshop/website_published.zip

Распаковываем архив по пути /var/www/website/

Шаг 4: Запуск сайта

1. Переходим в директорию в которой разместили собранный проект
2. Запускаем сайт с помощью команды

APIKEY= APIURL= HOST=0.0.0.0 PORT=4321 pm2 start ./server/entry.mjs

Указав все данные для подключения к ApiDataContract

(Тестовые доступы APIKEY=a1e91a3be9227233e8289241bef158df8fdf8cdd9a92057a357b968df7cb62a4 APIURL=https://astro.advantshop.tech/api/)

3. Включаем автозапуск при перезагрузке

pm2 startup

pm2 save

4. Проверить что сайт доступен под IP адресу сервера и порту 4321

Шаг 5: Подключение доменного имени (опционально)

С помощью любого веб-сервера можно подключить доменное имя, SSL сертификат и пр.

Рассмотрим пример с Nginx

1. Необходимо установить Nginx

sudo apt update

sudo apt install nginx

2. Настроить DNS

Прописать A запись example.com кс значением IP адреса сервера

3. Создать конфигурационный файл для домена

cd /etc/nginx/sites-available/

sudo nano example.com

внести в конфигурационный файл правило

server {
    listen 80;
    server_name example.com www.example.com;
    location / {
        proxy_pass http://localhost:4321;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Выйти из редактора и сохранить изменения

4. Применить конфигурацию

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

sudo nginx –t

sudo systemctl restart nginx

5. Проверить сайт по доменному имени

О продукте

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

Технические данные

AdVantShop.NET  создан с использованием JavaScript и TypeScript. Серверная часть приложения работает на платформе Node.js с библиотекой AstroJS. Для клиентской части используется библиотека SolidJS. Такое сочетание технологий позволяет создавать гибкое и устойчивое к изменениям приложение.

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

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

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

Функциональные особенности

Типовой набор функций

Все пользователи AdVantShop.NET получают доступ к следующим функциональным возможностям:

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

Карточки товаров

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

Каталог и категории товаров

Для удобства пользователей все товары расположены в каталоге, который состоит из категорий. Категория — это название группы товаров, которые объединены по определенному признаку. Пример: Женская одежда, Детская одежда.

Фильтры

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

Корзина

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

Оформление заказа

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

Купоны

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

Выбор города

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

Личный кабинет покупателя

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

Адаптивная верстка

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

Статические страницы

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

Техническая архитектура ПО

Описание архитектуры

AdVantShop.NET разработан на языке программирования JavaScript.
Серверная часть приложения базируется на платформе Node.js с библиотекой AstroJs.

Клиентская часть использует библиотеку SolidJS.

В качестве пакетного менеджера используется решение  pnpm.

Для получения внешних данных используется адаптер в виде API Json, внутреннего стандартизированного Json контракта - ApiDataContract.

ApiDataContract может быть реализован любым внешним сервисом, обладающим набором необходимых данных.

Файловая структура проекта использует паттерн монорепозитория.

Имеется четыре пакета:

ui-kit - библиотека базовых компонентов

utils - пакет содержащий утилитарные компоненты (логирование, кеширование, идентификация типа устройства и реализация запросов к API)

website -  основной пакет,  в котором расположена реализация интернет-магазина

website-builder - пакет использующийся для сборки интернет-магазина

В качестве локального хранилища данных используется механизм localStorage браузера и HTTP-cookie, в которых хранятся пользовательские данные на устройстве пользователя.

Описание методов ApiDataContact

GET /api/init Инициализация

Покупатель

POST /api/users/signin  Авторизация по эл. почте

POST /api/users/signinbyphone  Авторизация (или регистрация) по sms-коду. Отсылка sms-кода по номеру телефона.

POST /api/users/signinbyphoneconfirmcode  Авторизация (или регистрация) по sms-коду. Проверка введенного кода и авторизация.

GET /api/users/me  Получить текущего покупателя

POST /api/users/me  Изменить текущего покупателя

POST /api/users/me/smsphoneconfirmation  Послать смс-код по номеру телефона

POST /api/users/me/smsphoneconfirmationcode  Проверка смс-кода

GET /api/users/me/bonuses  Бонусная карта покупателя

GET /api/users/me/customer-fields  Получить доп. поля покупателя

POST /api/users/me/remove-account  Удалить аккаунт пользователя

POST /api/users/me/fcmtoken Обновить Firebase Cloud Messaging token

Контакты покупателя

GET /api/users/me/contacts  Получить список контактов пользователя

POST /api/users/me/contacts/add  Добавить новый контакт для пользователя

POST /api/users/me/contacts/{contactId}/update  Обновить контакт для пользователя

POST /api/users/me/contacts/{contactId}/delete  Удалить контакт для пользователя

GET /api/users/me/statistics  Статистика по пользователю

Заказ

GET /api/orders/me  Список заказов покупателя

GET /api/orders/me/{id}  Получить заказ покупателя

POST /api/orders/me/{id}/review Оценить заказ

POST /api/orders/me/{id}/cancel  Отменить заказ

Каталог

POST /api/catalog  Получить каталог

POST /api/catalog/all  Получить одностраничный каталог

POST /api/catalog/filter  Получить фильтр каталога

POST /api/catalog/filtercount  Получить кол-во товаров по фильтру

Поиск

POST /api/search  Поиск по товарам и категориям

POST /api/search/filter  Получить фильтр для поиска

POST /api/search/filtercount  Получить кол-во товаров по фильтру

POST /api/search/autocomplete  Поиск автозаполнение по товарам и категориям

Товар

GET /api/products/{id}  Получить товар

POST /api/products/{id}/price  Расчитать цену товара

GET /api/products/{id}/properties  Получить характеристики товара

GET /api/products/{id}/reviews  Получить отзывы товара

POST /api/products/{id}/reviews/add  Добавить отзыв

GET /api/products/{id}/related-products  Получить cross-sell, up-sell товары

GET /api/products/{id}/gifts  Получить подарки для товара

GET /api/products/{id}/stocks  Получить список складов с наличием

GET /api/products/{id}/price-rule-amount-list  Получить список тип цен в зависимости от кол-ва

Корзина

POST /api/cart  Получить корзину на основе переданных товарах

GET /api/cart  Получить текущую корзину

Купон

POST /api/coupons/me/add  Применить купон

POST /api/coupons/me/remove Удалить купон

Оформление заказа

POST /api/checkout  Передать данные для оформления заказа

Под заказ

GET /api/preorder/settings  Получить настройки для раздела "под заказ"

POST /api/preorder  Оформить под заказ

Способы доставки

GET /api/deliveries/types  Получить типы доставок

POST /api/deliveries/check-delivery-zone  Проверить адрес на возможность доставки доставками с типом "Доставки по зонам"

POST /api/deliveries/calculate  Расчет доставки

GET /api/deliveries/point-deliveries  Получить пункты выдачи

Страны, регионы, города

GET /api/locations/maincities  Список основных стран и городов

GET /api/locations/city  Получить город по названию или индексу

POST /api/locations/countries Список стран

Бонусная система

POST /api/bonus-cards/me/add  Создание бонусной карты для покупателя

Избранное

GET /api/wishlist  Получить товары из избранного

POST /api/wishlist/add  Добавить товар в избранное

POST /api/wishlist/remove  Удалить товар из избранного

Настройки

GET /api/settings/dadata Настройки Dadata

Статические блоки

GET /api/staticblocks  Получить статические блоки

Статические страницы

GET /api/staticpages  Получить статические страницы

GET /api/staticpages/{id}  Получить статическую страницу

Модули

GET /api/modules/{id}/block  Получить блок срендеренный модулем

v2

Инициализация

GET /api/v2/init Инициализация

Лиды

POST /api/v2/leads/add Создание лида

Способы доставки

POST /api/v2/deliveries  Получить доставки

Инструкция по эксплуатации витрины интернет-магазина

 Что такое витрина интернет-магазина

 Как выглядит главная страница  

• Шапка
• Каталог
• Меню
• Товары
• Дополнительные блоки
• Нижнее меню

Каталог и категории товаров

Карточка товара

Оформление заказа

Личный кабинет

Что такое витрина интернет-магазина

 

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

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

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

Рассмотрим, как выглядит  главная страница (рис.1).

Рисунок 1. Главная страница

Как выглядит главная страница

 

Главная страница  состоит из нескольких блоков:

• Шапка магазина - в ней  отображается название сайта и логотип магазина (рис.2).

Рисунок 2. Название и логотип

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

Рисунок 3. Строка поиска

• телефон и корзина (рис.4).

Рисунок 4. Телефон и корзина

• верхняя панель с выбором города и   ссылкой на профиль магазина (рис.5).

Рисунок 5. Верхняя панель шапки

Меню витрины представляет собой набор пунктов информирующих об оплате, доставке, о компании и контактах магазина  (рис.6).

Рисунок 6. Меню

Блок с товарами на главной, где представлены товарами общим списком товаров (рис.7).

Рисунок 7. Товары на главной витрине

Дополнительные блоки на главной

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

Рисунок 8. Дополнительные блоки

Нижнее меню

 

В нижнем меню находится информация о соц. сетях, дублируется меню сайта (рис.9).
Рисунок 9. Нижнее меню

Каталог и категории

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

Рисунок 10. Каталог

В каталог входит категории, переходя в которые открывается список товаров открытой категории (рис.11).

Рисунок 11.Категории товаров

В каждой категории присутствует фильтр, в котором выбрав определенные параметры можно найти необходимые товары (рис.12).

Рисунок 12. Фильтр товаров

Карточка товара

 

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

Любой товар имеет название, текстовое описание, фотографии внешнего вида, стоимость, возможность изменить количество товара, кнопка добавления в корзину (рис.14).

Рисунок 14.Карточка товара

Рисунок 15. Блок описания товара и характеристик

Корзина и оформление заказа

В карточке товара  по кнопке оформления “Добавить”, товар добавляется в виртуальную корзину (рис.16).

Рисунок 16. Добавление товара в корзину

Перейдя в корзину будет виден список товаров для покупки, количество, и стоимость, кнопка перехода к оформлению заказа (рис.17).

Рисунок 17. Корзина интернет-магазина

При переходе к оформлению заказа, если пользователь не зарегистрирован, необходима авторизация по номеру телефона  (рис.18).

Рисунок 18. Авторизация покупателя

После ввода телефона на номер будет выслан код подтверждения (рис.19).

Рисунок 19. Авторизация - код подтверждения

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

Рисунок 20. Ввод персональных данных покупателя

На данной же странице выбираем способы доставки и оплаты, можно ввести код купона или сертификата, предоставляющего скидку, комментарии к заказу. По кнопке “Подтвердить заказ” оформление заказа завершается  (рис.21).

Рисунок 21. Оформление заказа

Личный кабинет

После того, как клиент будет авторизован, ему будет доступен личный кабинет. Личный кабинет доступен по ссылке “Войти”, если покупатель не авторизован, либо по ссылке “Личный кабинет”, если покупатель уже авторизован (рис.22, 23).

Рисунок 22. Личный кабинет

Рисунок 23. Личный кабинет

В личном кабинете покупатель может просмотреть историю заказов, купленные товары, просмотреть или изменить свои данные, изменить существующий адрес или добавить новый (рис.24).

Рисунок 24. Личный кабинет - история заказов

Рисунок 25. Личный кабинет - личные данные покупателя

Рисунок 26. Личный кабинет - список адресов