Интеграция ЭЛМА 365 с маркетом группы Вконтакте

Данная статья описывает решение, реализованное в рамках Хакатона в феврале 2022 года.

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

Почему Вконтакте?
- Вконтакте одна из самых популярных социальных сетей в России (2 место после Youtube),
- обладает обширным и развитым api, что позволит осуществить полную интеграцию в будущем.

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

Что нужно клиентам?
- вести основные дела бизнеса в ЭЛМЕ, при этом иметь возможность минимальными усилиями поддерживать страницу в ВК в актуальном состоянии,
- понятный, удобный и информативный интерфейс для управления,
- простота развертывания решения.

Техническое описание визуальных элементов​

Для описания верстки всех визуальных элементов наша команда создала ЛЕНДИНГ. Здесь Вы сможете получить исходный код, если захотите его использовать у себя или кастомизировать, а также увидеть, как он работает!

Создание токена для обращения к VK API​

Для использования методов VK API используется приложение. Для создания приложения, нужно авторизоваться в ВК используя аккаунт и перейти на страницу с приложениями https://vk.com/apps?act=manage.



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



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

Для получения access_token необходимо перейти по ссылке авторизации в вк и разрешить доступ к указанным правами доступа (scope). В scope указаны доступы для управления стеной, загрузки изображения, управления товарами в маркете, управления группой. Offline является параметром для отключения срока жизни токена. Redirect_url указываем https://oauth.vk.com/blank.html, чтобы не добавлять свой сайт в доверенные в настройках приложения. Иначе при указании другого url токен будет действовать только с того ip адреса, с которого он был получен, при этом серверные скрипты не смогут выполнять api методы.

https://oauth.vk.com/authorize?client_id=${идентификатор_приложения}&display=page&redirect_uri=https://oauth.vk.com/blank.html&scope=wall,photos,market,groups,offline&response_type=token&v=5.131

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

https://oauth.vk.com/authorize#access_token=${возвращенный_токен}

Техническое описание


​

Решение представляет собой модуль с виджетами:
- основная информация о сообществе,
- раздел добавления поста в ленту,
- раздел Магазин с отображаемыми товарами.

Код скриптов в приложениях к статье.

В настройки модуля вынесены следующие 5 переменных:

Техническое описание скриптов​

Виджет “Информация о сообществе”

Данный виджет отображает: имя компании, область деятельности, описание, сайт, телефон, адреса компании, фото. С кодом можно ознакомиться здесь: https://community.elma365.com/attachments/47/

Для получения данных из клиентского скрипта виджета в функции onInit вызываются две серверные функции :
getGroupData() - функция получает всю общую информацию о странице, кроме адресов,
getGroupAdresses()- получает адреса сообщества.

Так как данные о стране и городе приходят в закодированном виде, внутри функции getGroupAdresses() происходит вызов еще 2 функций:

await getCityById(adressesArray.city_id)
await getCountryById(adressesArray.country_id)

Они получат название города и страны соответственно.


Виджет добавления поста.
Данный виджет отображает интерфейс для размещения поста в сообществе.

Он состоит из элемента input для ввода текста поста и стандартного UI ELMA365 для добавления изображений.

Api Вконтакте устроены таким образом, что прежде чем сохранить пост нам необходимо:

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

Нажатие на кнопку Добавить приводит к вызову функции sendPost() клиентского скрипта. В ней происходит обнуление текста ошибок и вызов серверной функции postMessage().

Функция postMessage() обращается к методу uploadImage(), который загружает изображение на сервер Вконтакте с помощью api photos.getWallUploadServer.

Далее метод saveImage() сохраняет изображение с помощью api photos.saveWallPhoto. После успешного выполнения запроса возвращается массив, содержащий объект с загруженным изображением.

Далее функция postMessage(), сохраняет пост на стене, обращаясь к api wall.post.


Виджет Магазин.

При инициализации виджета происходит вызов клиентской функции getGoods(), которая получает все экземпляры товаров и сохраняет их в контекстную переменную Context.data.goods. Эта переменная используется виджетом Код для отображения карточек товаров.

На странице существует возможность создать новый экземпляр товара по нажатию на кнопку:



При этом открывается попап с формой создания товара:



При нажатии на кнопку Сохранить происходит вызов функции addCard(), которая создает экземпляр приложения Товары. При этом если было выбрано Выгрузить в ВКонтакте - происходит обращения к методу postToVK(goodsId, action), для размещения товара в паблике. Данный метод будет описан далее.

При нажатии на кнопку



откроется аналогичная форма для редактирования информации о товаре, в которой уже будут заполнены данные о товаре. При нажатии на кнопку Сохранить произойдет вызов функции editCard(), которая изменит экземпляр товара в приложении Товары. В зависимости от выбора пользователя “Выгрузить в ВКонтакте”, а также был ли товар уже опубликован в паблике или нет, будет произведен вызов функции postToVK с соответствующим значением action.

Нажатие на кнопку



приведет к открытию попапа, подтверждающего удаление товара:





Подтверждение удаление вызовет метод deleteCard(), который удаляет экземпляр товара, а также его публикацию из ВКонтакте.

На данном этапе развития проекта для работы с api Вконтакте в модуле существуют 3 соответствующих Действия в БП:

• добавление товара,
• редактирования товара,
• удаления товара.

В приложении Товары созданы 3 соответствующих бизнес процесса, с использованием методов из модуля:



Запуск данных процессов осуществляется с помощью методов Web API из функции postToVK().

При запуске бизнес процесса addProduct вызывается Действие в БП “Добавить товар”. В скрипте мы обращаемся к следующим апи ВКонтакте:
- photos.getMarketUploadServer
- photos.saveMarketPhoto
- market.add

Скрипт редактирования товара аналогичен скрипту добавления товара, лишь в заключительном запросы мы обращаемся к апи market.edit, а в теле запроса дополнительно отправляем id товара.

Для удаления товара из сообщества мы обращаемся к апи market.delete и отправляем id удаляемого товара.