...

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

Тема в разделе "Примеры решений и дополнительных модулей", создана пользователем f.nikolaev, 1 мар 2022.

  1. f.nikolaev

    f.nikolaev Участник

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

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

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

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

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

    [​IMG]

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

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

    [​IMG]

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

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

    [​IMG]

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

    [​IMG]

    Используя 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=${возвращенный_токен}


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

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

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

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

    [​IMG]


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

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

    Данный виджет отображает: имя компании, область деятельности, описание, сайт, телефон, адреса компании, фото. С кодом можно ознакомиться здесь: 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. Эта переменная используется виджетом Код для отображения карточек товаров.

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

    [​IMG]

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

    [​IMG]

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

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

    [​IMG]

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

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

    [​IMG]

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

    [​IMG]



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

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

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

    [​IMG]

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

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

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

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

    Вложения:

    Последнее редактирование: 1 мар 2022