Создание приложения Slack с встроенной интеграцией SFDC

Создание приложения Slack: проектирование пользовательского интерфейса

Этот пост является продолжением нашей серии, основанной на [серии видеороликов, объясняющих, как создавать приложения Slack] (https://www.youtube.com/playlist?list=PLgIMQe2PKPSKcl26YQoKCR7F3CwIc8kxi), которые интегрируются с API Salesforce. С помощью [Slack Starter Kit] (https://github.com/developerforce/salesforce-slack-starter-kit) от Salesforce разработчики приложений Slack могут перенести общие проблемы, такие как аутентификация Salesforce, иерархия каталогов, повторно используемый код и развертывание, в Heroku. . Конечным результатом является меньше времени, затрачиваемого на обработку кода, и больше времени на создание функций для вашего приложения.

В нашем последнем посте мы ознакомились со стартовым набором и настроили нашу среду разработки для создания базовое приложение Slack. В этом посте мы продолжим развивать это приложение Slack, сосредоточившись на том, как Slack Starter Kit упрощает разработку двух основных компонентов каждого приложения Slack:

1. Прослушивание взаимодействия с пользователем

1. Отрисовка пользовательского интерфейса.

Реакция на события

Если вы когда-либо разрабатывали внешнее веб-приложение с использованием JavaScript или CSS, вы, вероятно, знакомы с основными принципами обработки событий. События в этом контексте определяются как действия пользователя на вашем веб-сайте. Например, щелчок указателя мыши по ссылке генерирует событие onclick; указатель, ссылающийся на фрагмент текста, излучает onhover; нажатие клавиши на клавиатуре выдает «onkeypressed»; и так далее.

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

• Во-первых, ваше приложение должно определить URL-адрес веб-перехватчика. Это путь на вашем сервере, который может получать POST-запросы от Slack.

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

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

Когда ваше приложение получает событие от Slack, вы можете делать все, что хотите: ответить пользователю, открыть диалоговое окно, чтобы запросить дополнительную информацию, или просто сохранить некоторую информацию в своей базе данных. Следует помнить только один важный момент: вы должны ответить Slack в течение трех секунд. Это должно сообщить Slack, что ваше приложение получило полезную нагрузку и работает над ответом. Вы можете выполнять эту работу в фоновом режиме — возможно, в другом потоке, занимая столько времени, сколько вам нужно, — но только после того, как вы сообщите Slack, что все «200 OK».

Давайте посмотрим, как работает обработка событий на практике. Перейдите к своему манифесту приложения и прокрутите вниз до нижней части страницы, рядом с клавишей «Настройки». Это должно выглядеть так:

настройки:

события_подписки:

request_url: https://<ваше-приложение>.herokuapp.com/slack/events

бот_события:

• app_home_opened

интерактивность:

is_enabled: правда

request_url: https://<ваше-приложение>.herokuapp.com/slack/events

В этом разделе указано, куда Slack должен отправить свою полезную нагрузку при возникновении события. Ключ bot_events уже определяет одно событие для прослушивания, app_home_opened, которое запускается, когда ваше приложение открывается в Slack.

Теперь откройте локальную копию вашего Starter Kit в вашей среде IDE; перейдите к apps/slack-salesforce-starter-app/listeners/events/app-home-opened.js. Как мы видели в предыдущем посте, Starter Kit имеет продуманную структуру каталогов, позволяющую разрешить любую двусмысленность в отношении того, где следует вносить изменения. В этом случае папка событий отвечает за определение всех наших ответов на события, точно так же, как папка ярлыков определяла нашу команду slack в предыдущей статье. Найдите первое вхождение следующей строки:

client.views.publish

Как следует из названия метода, эта функция использует Slack SDK для вызова API с именем views.publish. Основное представление для этого события создается функцией под названием «authorization_success_screen», которую можно найти в «apps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js».

Давайте внесем несколько изменений в эти файлы. В строке 16 добавьте эту строку, чтобы получить метку времени события:

пусть event_ts = event.event_ts;

Измените оба вызова authorization_success_screen, чтобы включить эту переменную в качестве нового аргумента:

вид: авторизация_success_screen(

текущийпользователь.имя пользователя,

event_ts

Наконец, откройте auth-success.js, измените сигнатуру метода, чтобы включить event_ts, и измените отображаемую строку, чтобы включить эту информацию:

'использовать строгий';

const { HomeTab, Blocks } = require('slack-block-builder');

const author_success_screen = (имя пользователя, event_ts) => {

// предыдущий код остается без изменений

Блоки.Раздел({

text: Это ${event_ts}, и вы успешно прошли аутентификацию в Salesforce как ${username}.

// продолжение кода остается без изменений

Зафиксируйте это изменение и разверните его на Heroku, как и раньше:

$ git добавить.

$ git commit -m "Добавить метку времени события"

$ git push главная героиня

Когда развертывание будет завершено, перейдите на вкладку своего приложения в левом меню Slack. Вы должны увидеть другую строку, которая показывает отметку времени открытия приложения.

Создание пользовательского интерфейса

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

Для разработки и представления макетов Slack предоставляет систему, известную как [Block Kit] (https://api.slack.com/block-kit). Точно так же, как HTML — это язык разметки для Интернета, а Visualforce — язык разметки для Salesforce, Block Kit — это язык разметки для Slack, за исключением того, что он использует JSON. Например, вот как может выглядеть кнопка, разработанная в Block Kit:

"тип": "кнопка",

"текст": {

"тип": "обычный_текст",

"текст": "Сохранить"

"стиль": "основной"

Block Kit гарантирует, что каждое приложение Slack будет иметь согласованный пользовательский интерфейс. Из-за этого существует ограниченный набор элементов пользовательского интерфейса, которые вы можете использовать.

При работе с Block Kit вы разрабатываете макет в формате JSON. Затем вы используете Slack API для POST этого JSON на канал, вкладку или прямое сообщение.

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

sfdx сила: организация: открыть

В меню «Настройка» найдите [Мастер импорта данных] (https://help.salesforce.com/s/articleView?id=sf.importing.htm&type=5). Выберите CSV в качестве типа данных, затем скопируйте и вставьте следующие строки в новый файл с именем data.csv:

Имя контактного лица, фамилия контактного лица, описание контактного лица

Арден, Изабела, Лорем ipsum dolor sit amet

Rowina, Arti, Proin a est sit amet quam varius efficitur.

Эйслин, Эдип, Презент и другие

Sindri, Filbert, Proin facilisis sit amet libero vulputate sodales

Сирил, Гратьен, Нулла и масса eu turpis venenatis egestas

Загрузите этот файл в качестве источника данных. Импорт этих данных займет всего минуту или две. Вы можете перейти на вкладку «Контакты», если хотите убедиться в том, что эти имена существуют.

Далее мы собираемся внести изменения, аналогичные тем, которые мы вносили ранее при добавлении метки времени события. Для использования доступна переменная с именем conn, которая служит для подключения к Salesforce. Мы можем использовать его для запроса контактных данных, которые мы хотим отобразить в Slack.

Перейдите к apps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js. Мы будем ожидать разрешения промиса в этой функции и включим существующую переменную conn в качестве нового аргумента:

вид: ожидание авторизации_success_screen(

текущийпользователь.имя пользователя,

событие_ц,

соединение

И снова откройте auth-success.js и измените сигнатуру метода, включив в нее conn. Вам также необходимо объявить функцию как async:

'использовать строгий';

const { HomeTab, Blocks } = require('slack-block-builder');

const author_success_screen = async (имя пользователя, event_ts, conn) => {

// продолжение кода пока остается без изменений

Далее, с этим соединением, мы собираемся отправить запрос в Salesforce, чтобы получить наши недавно созданные записи контактов. Затем мы отобразим их на вкладке «Главная» нашего приложения Slack.

Поскольку у нас уже есть подключение к Salesforce, получить данные так же просто, как выполнить запрос SQL. Поместите этот код прямо перед тем местом, где определена переменная homeTab:

константный результат = ожидание conn.query(

ВЫБЕРИТЕ имя, описание ИЗ контакта

пусть записи = результат.записи;

пусть fields = records.map((запись) => {

return *${record.Name}*: ${record.Description};

Затем в нижней части вызова метода блоков добавьте следующие строки, представляющие пользовательский интерфейс, который вы создаете из Block Kit:

Блоки.Раздел({

text: Это ${event_ts}, и вы успешно прошли аутентификацию в Salesforce как ${username}.

Blocks.Header({ текст: 'Контакты' }),

Блоки.Разделитель(),

Блоки.Раздел({

текст: fields.join('
')

Если вы вернетесь на вкладку «Главная» в приложении Slack, вы увидите список контактов вашей организации!

Узнать больше

Мы создали приложение Slack, которое извлекает данные из Salesforce и представляет эти данные в пользовательском интерфейсе с помощью фреймворка под названием Block Kit. В следующем посте мы отправим данные из Slack обратно в Salesforce!

До этого вы можете ознакомиться с тем, как работает Block Kit. Slack предоставляет Block Kit Builder, который площадка для их элементов пользовательского интерфейса. Под капотом Slack Starter Kit используется [Block Builder] (https://www.blockbuilder.dev/), чтобы упростить сборку пользовательского интерфейса, с которой мы работали.