Как создать бота GitHub с фреймворком PhantomJS, React и Serverless

1656666854 kak sozdat bota github s frejmvorkom phantomjs react i serverless

Павел Власов

1*3x2LwtrTs0Hr2zIm_VUqPA
Lego IT парень by bnilsen

В этом учебнике говорится о создании простого бессерверного бота, возвращающего диаграмму с крупнейшими участниками хранилища GitHub за выбранный период. Это актуально для тех, кто имеет определенный опыт работы с React, JavaScript, TypeScript, Node.js, Amazon Web Services (AWS) и бессерверным фреймворком.

Вы можете проверить код Github.

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

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

Чтобы получить самые популярные участники хранилища, мы будем использовать API статистики GitHub, удивительный Nivo для отображения данных, Storybook, чтобы проверить, как выглядит и выглядит наша диаграмма, PhantomJS, чтобы превратить HTML в изображение, и бессерверную структуру для взаимодействия с AWS.

Давайте начнем

Я использую TypeScript. Если вы предпочитаете ES6, вам нужно будет настроить Babel.

Во-первых, вы должны создать tsconfig.json в корне вашего хранилища. Среди вариантов, на которые следует обратить внимание:

"module": "commonjs","target": "es5","lib": ["es6", "esnext.asynciterable"],"moduleResolution": "node","jsx": "react"

Затем мы создадим простой API для запроса статистики из GitHub. Вы можете соблюдать файловую структуру из хранилища GitHub или использовать собственную. Например:

Чтобы получить доступ к API GitHub, необходимо создать личный маркер доступа.

Этот модуль просто посылает запрос с предоставленным маркером и получает данные.

Отображение диаграмм

Для отображения данных мы будем использовать Nivo и Storybook. Простой компонент может выглядеть так:

Сначала настройте Storybooks, выполнив такую ​​команду в корневой папке:

npm i -g @storybook/cligetstorybook

Скопируйте папку .storybook в корневой репозиторий и замените все существующие файлы. Он содержит конфигурацию Webpack и Storybook. Создать stories папку и добавьте образец истории для вашего компонента:

бежать npm run storybook и откройте localhost в браузере. Вы должны увидеть следующий результат:

1*exyIVjE5S3_92nKg4h_YvA

Попытайтесь поиграть с параметрами и тестовыми данными. Книга рассказов сразу изменит облик.

Преобразование HTML в PNG

Обычно чатовые системы, такие как Facebook Messenger и Slack, не позволяют пользователям вставлять HTML-карты в диалоговое окно, поэтому следующим шагом будет создание помощника, который превращает HTML в изображение PNG.

Используя простой сценарий с библиотекой jsdom, мы можем имитировать поведение браузера и сериализировать HTML как это:

createDomForChart возвращает новый экземпляр jsdom, а функция chart просто вызывает dom.serialize() когда воспроизведение компонентов выполнено.

С помощью PhantomJS мы можем превратить разметку в изображение с помощью этого простого сценария:

Мы проходим screenshot.js в phantomjs путь к исполняемому файлу – вместе со строкой HTML, шириной и высотой – и возвращением буфера с воспроизведенным изображением.

Вы можете заметить, что я использовал два двоичных файла PhantomJS (для OS X и Linux). Версия Linux нам понадобится дальше в среде AWS. Вы можете загрузить их из PhantomJS.org или использовать файлы из хранилища.

Связывая все

Теперь давайте создадим лямбду для обработки запросов. Я рекомендую поместить логику визуализации PNG в отдельную службу. Поскольку двоичный файл PhantomJS имеет размер примерно 50 Мб, он замедляет развертывание, если вы что-то изменяете в API. Кроме того, вы можете использовать этот лямбда для других целей.

Начнем с создания webpack.config.ts (сгруппировать исходный код) и serverless.base.js (для определения базовой бессерверной конфигурации) в корневой папке.

Если вы хотите узнать больше о случаях использования бессерверных конфигураций JavaScript, вы можете прочитать об этом в моей предыдущей статье.

Вам придется изменить названия сегментов развертывания и изображений, например:

deploymentBucket: {    name: 'com.github-stats....deploys'},environment: {    BUCKET: 'com.github-stats....images',    GITHUB_TOKEN: '${env:GITHUB_TOKEN}',    SLACK_TOKEN: '${env:SLACK_TOKEN},    STAGE: '${self:provider.stage}'},

Это объясняется тем, что название сегмента должно быть глобально уникальным.

Служба преобразования HTML в PNG

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

…и если все хорошо, он должен создать изображение и поместить его в ведро S3.

Давайте творить webpack.config.ts для объединения исходных файлов Мы будем использовать copy-webpack-plugin и webpack-permissions-plugin чтобы включить двоичные файлы PhantomJS в комплект и предоставить разрешения на выполнение. Это требует от нас выполнения команды развертывания с помощью sudo, поскольку Webpack не имеет разрешения изменять права файловой системы по умолчанию.

Последним шагом будет использование serverless.js файл, чтобы связать наш обработчик с событием API Gateway.

Теперь нам нужно выполнить те же шаги для обработчика статистики, но нам не нужно вносить никаких изменений webpack.config.ts.

Единственное отличие заключается в дополнительном разрешении на вызов лямбда-определения:

iamRoleStatements: [                           ...baseConfig.provider.iamRoleStatements,{    Effect: 'Allow',    Action: ['lambda:InvokeFunction'],    Resource: ['*']}]

Настройка бота Slack

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

Мы должны обработать событие проверки от Slack и ответить 200 параметрам статуса и вызова:

callback(null, {   body: JSON.stringify({     challenge: (slackEvent as VerificationEvent).challenge   }),   statusCode: 200});

Чтобы правильно обработать событие Slack, конечная точка должна ответить в течение 3000 миллисекунд (3 секунды), поэтому нам придется немедленно ответить и асинхронно отправить следующее сообщение с помощью API postMessage.

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

Код конфигураций serverless.js и Webpack будет похож на службу статистики, поэтому, если у вас возникнут проблемы с его настройкой, просмотрите полный исходный код.

Создание программы Slack

Теперь давайте создадим новую программу Slack. Выделите API Slack, создайте новую учетную запись (если вы этого не сделали), создайте новую программу и добавьте область действия бота в разделе областей.

Перейдите к разделу OAuth и разрешения на боковой панели.

1*BtAkQBAhDKgIt5o0Xs3bkg

Добавьте область пользователя бота.

1*wEGOZdgQffBBPvQULS-iOg

Затем вы сможете установить приложение в своей организации и получить доступ к токенам.

1*kWV_rEpQwUoWGxyymBhzew

Развертывание сервисов

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

npm install -g serverlessnpm install -g serviceless

Скопируйте бот-токены GitHub и Slack и установите для них соответствующие переменные среды GITHUB_TOKEN и SLACK_TOKEN. Выполните следующую команду в терминале:

sudo GITHUB_TOKEN=<your token> SLACK_TOKEN=<your slack token> slx deploy all

Как упоминалось выше, sudo требуется для установки разрешений на исполнение для двоичных файлов PhantomJS.

Наберитесь терпения! Развертывание может занять некоторое время. В конце вы должны увидеть подобный результат:

Deployment completed successfuly
[app/html-to-png] [completed]:Service Informationservice: html-to-pngstage: devregion: us-east-1stack: html-to-png-devapi keys:   Noneendpoints:   Nonefunctions:   renderToPng: html-to-png-dev-renderToPngServerless: Removing old service versions...[app/slack] [completed]:Service Informationservice: git-stats-slackstage: devregion: us-east-1stack: git-stats-slack-devapi keys:   Noneendpoints:   POST -    eventHandler: git-stats-slack-dev-eventHandlerServerless: Removing old service versions...[app/stats] [completed]:Service Informationservice: git-statsstage: devregion: us-east-1stack: git-stats-devapi keys:   Noneendpoints:   GET -    getContributorStatsImage: git-stats-dev-getContributorStatsImageServerless: Removing old service versions...

Последним шагом будет подписка нашей конечной точки на события упоминания ботов.

В разделе Slack API выберите раздел «Подписка на события».

1*YcHwjOzxPKOZF-wLYt5TZQ

Затем вставьте URL-адрес обработчика событий, который можно найти в исходных данных команды развертывания.

1*S0grF5E7HfaP3fihUuj7lg

Пора немного поиграть! Вот несколько примеров воспроизведенных изображений:

бессерверный/бессерверный

1*PpPdZg9hW4ee7VbCLQM7Gw

facebook/реагировать

1*taq4dd5hTHMIXlcUdPl0rQ

plouc/nivo

1*KPvScIrez3aAsbwt_nDAuA

Это!

Надеюсь, эта статья была для вас полезна. Я бы хотел увидеть в комментариях другие типы статистики, которые вы хотели бы видеть в сервисе.

Пожалуйста, хлопайте, если вам понравилась статья! А если вы хотите пообщаться или связаться, вы можете найти меня в Twitter, GitHub и Linkedin.

Добавить комментарий

Ваш адрес email не будет опубликован.