Функциональные возможности:
Иерархический каталог: Навигация по папкам и товарам (аналог номенклатуры 1С).
Учет характеристик: Поддержка товаров с разными свойствами (размеры, цвета, объемы) и ценами.
Корзина и оформление: Выбор количества, расчет итоговой суммы, выбор типа доставки (Самовывоз/Доставка) и ввод адреса.
Авторизация: аутентификация пользователя через Telegram initData с выдачей JWT/Auth-токена.
Прямой обмен: Заказы улетают в 1С (POST-запрос), каталог запрашивается из 1С (GET-запросы). Все запросы делаются через api gateway, чтобы скрыть на фронтенде ip сервера 1С и авторизацию 1С.
Требования:
- Должен быть настроен веб сервер для публикации http сервисов 1С
- Необходим белый ip от провайдера и открыт порт на маршрутизаторе
- Аккаунт на yandex cloud, там необходимо будет создать и настроить сервис api gateway для перенаправления запросов из фронтенда в 1С. Можно напрямую, но так безопасней.
- Аккаунт в timeweb.cloud. Я выбрал его, просто потому что удобно. Github репозиторий подключил и все взлетело
ФРОНТЕНД НАПИСАН ПОЛНОСТЬЮ С ПОМОЩЬЮ google ai studio
Предлагаю некий шаблон, не готовое решение, для создания интернет каталога с возможностью оформить заказ. Решение "легкое", в плане нет дополнительного сервера с бэкэндом, запросы напрямую в 1С через api gateway, что, конечно, вносит свой негативный фактор в виде низкой скорости отдачи ответа для frontend приложения. Но как дополнительный канал продаж для небольшого количества одновременных пользователей подойдет, можно просто использовать как прайс-лист.
Настройки в 1С
КТГ каталог ТГ (Обработки)
В TG_BOT_KEY вставляете ключ полученный при создании бота в @botfather
Настройка "Ручное создание каталога" дает доступ к ручному создания нужной иерархии папок и содержащихся в них номенклатур
Если опция выключена, в бота будет выгружаться иерархия номенклатуры прям как в справочнике.
В фото на страницу товара подтягивается главное фото карточки номенклатуры. Описание так же типовое из карточки подтягивается.
При первом открытии пользователем webApp в справочнике "КТГ_ПользователиTG" создается элемент с данными пользователя (имя, имя пользователя, tg id). Такой пользователь может смотреть каталог, но заказы сделать не может. При попытке сделать заказ его попросит пройти регистрацию. После того как пользователь пройдет регистрацию, его пользователь должен пройти модерацию - в 1С нужно в элементе справочника КТГ_ПользователиTG, добавить вручную контрагента. После чего пользователь оформляет заказ, и в 1С создается заказ покупателя (заполнен только контрагент и товары).
Не из телеграмма в этом приложении заказ не сделать. Проверяются данные, получаемые от телеграмма, на валидность, дабы подтвердить, что данные действительно от того пользователя, который их отправил. Авторизация сделана по типу JWT, при входе проверяется, валидны ли данные, если все ок, создается токен uuid с временем жизни.
После обработки заказа есть возможность отправить в ТГ документ Заказ клиента или счет на оплату из типовой формы печати.
Обработку для настройки токена и каталога и справочник с пользователями в интерфейс не выносил. Открывайте через "функции для технического специалиста"
Какие еще есть варианты для улучшения приложения и/или обмена (на мой взгляд):
- убрать ручную модерацию, например сопоставлять контрагентов по номеру телефона, если вы уверены, что клиент, который открыл приложение, уже есть в 1С.
- индивидуальные цены для клиентов
- индивидуальный каталог для клиента (состав номенклатуры с иерархией)
- пагинация для каталога на тот случай, если много строк внутри одной ветки
Далее пойдет настройка фрондент части приложения и apigateway сервиса
Клонируем на свой аккаунт в гитхабе мой репозиторий https://github.com/usich/telegram_1c_catalog_webapp
Далее создаем в yandex cloud api-шлюз. Предварительно нужно, конечно, создать там платежный аккаунт, но это я пропущу, инструкции есть.
Конфигурация api шлюза:
openapi: 3.0.0
info:
title: Sample API
version: 1.0.0
servers:
- url: <служебный домен>
paths:
/{path+}:
x-yc-apigateway-any-method:
x-yc-apigateway-integration:
type: http
url: http://<ip:port>/torg115_demo/hs/api/{path}
query:
'*': '*'
foo_param: ""
headers:
Host: <ip:port>
Server-api-gateway: <служеюный домен без https://>
'*': '*'
Authorization: Basic QWRtaW46MTIzNDU2Nzg=
Foo-Header: ""
Bar-Header: [ "one", "two" ]
Single-header: three
omitEmptyHeaders: true
omitEmptyQueryParameters: true
parameters:
- name: path
in: path
required: false
schema:
type: string
<служебный домен> - это домен api-шлюза, который выдаст сервис после его создания
<ip:port> - ip адрес вашего провайдера и порт, который проброшен для http, если он не 80
Также нужно заполнить поле Authorization с 1С авторизацией в формате base64, можно воспользоваться онлайн конвертором https://www.lddgo.net/en/encrypt/basic-auth
Далее открываем в репозитории файл на редактирование config.ts и подставляем туда свой адрес служебного домена.
Финишная прямая. Создаем аккаунт на timeweb (или аналоги), пополняем кошелек. Создаем АППу (apps platform), тип - frontend -> React. Подвязываем свой github аккаунт, выбираем нужные репозиторий и заказываем приложение.
После создания приложение необходимо скопировать домен, который подвязался под приложением, и добавить его в кнопку телеграмм бота через botFather
В расширении использовал открытый пакет //infostart.ru/1c/articles/2016164/. А точнее, выдернул оттуда модули для работы с telegram.
Думаю, это можно так же спокойно натянуть на MAX. Нет возможности протестировать пока что.
Тестировал на Управление торговлей, редакция 11 (11.5.23.53)
Дэмо бот @test_catalog1_bot. Подключен к УТ 11 Дэмо.
Проверено на следующих конфигурациях и релизах:
- Управление торговлей, редакция 11, релизы 11.5.23.53
Вступайте в нашу телеграмм-группу Инфостарт
