Автор оригинала: FreeCodeCamp Community Member.
Павел Власов
Этот учебник состоит в том, чтобы построить простой бот без сервеса, который возвращает диаграмму с лучшими авторами репозиторий GitHUB для выбранного периода. Это имеет отношение к тем, у кого есть опыт работы с React, JavaScript, Tymdercript, Node.js, Amazon Web Services (AWS) и Serverless Framework.
Вы можете проверить Код на Github Отказ
Услуги и инструменты Мы будем использовать
Прежде чем прыгать в кодировку, давайте сделаем быстрый обзор услуг AWS и инструменты, которые мы будем использовать.
Чтобы извлечь лучшие участники репозитория, мы будем использовать Github Stats API удивительный Ниве Для отображения данных Статьгор Чтобы проверить, как выглядит наш график и чувствует, Фантомс Чтобы включить HTML в изображение, и Смертная рамка взаимодействовать с AWS.
Давайте начнем
Я буду использовать TeampScript. Если вы предпочитаете ES6 вам нужно будет настроить Бабел Отказ
Во-первых, вы должны создать tsconfig.json в корне вашего репозитория. Варианты обратить внимание на включение:
"module": "commonjs","target": "es5","lib": ["es6", "esnext.asynciterable"],"moduleResolution": "node","jsx": "react"
Затем мы создадим простой API для запроса статистики из GitHub. Вы можете следить за структурой файла из REPO GitHUB или использовать свои собственные. Например:
Чтобы получить доступ к API GitHub, вам придется Создайте личный токен доступа Отказ
Этот модуль просто Отправляет запрос с предоставленным токеном и извлекает данные.
Отображение диаграмм
Чтобы отобразить данные, мы будем использовать Nivo и Salebook. Простой компонент может выглядеть так:
Во-первых, настроить сюжетные книги, запустив следующую команду в корневой папке:
npm i -g @storybook/cligetstorybook
Скопируйте .StoryBook папка в репозиторий корня и заменить все существующие файлы. Он содержит конфигурацию WebPack и Designbook. Создать Истории Папка и поставить в образцовую историю для вашего компонента:
Беги NPM Run Designbook и открыть localhost в браузере. Вы должны увидеть следующий результат:
Попробуйте поиграть с вариантами и тестовыми данными. Статья книги немедленно изменит взгляд.
Поворачивая HTML в PNG
Обычно, такие системы чата, такие как Facebook Messenger и Slack, не позволяют пользователям вставлять карты HTML в диалоговом окне, поэтому следующий шаг будет для создания помощника, который отображает HTML в изображение PNG.
Используя простой скрипт с jsdom Библиотека, мы можем имитировать поведение браузера и Serialize HTML, как это:
Создание создания Возвращает новый экземпляр JSDOD, а функция диаграммы просто звонит dom.serialize () Когда выполняется рендеринг компонента.
С Phantomjs мы можем повернуть разметку в изображение, используя этот простой скрипт:
Мы проходим Screenshot.js в Фантомс Исполняемый путь – наряду с строкой HTML, шириной и высотой – и получить задний буфер с визуализированным изображением.
Вы можете заметить, что я использую два двоичных файлов Phantomjs (для OS X и Linux). Нам понадобится версия Linux в среде AWS. Вы можете скачать их из Phantomjs.org или Используйте файлы из репозитория Отказ
Связывая все вверх
Теперь давайте создадим лямбда обрабатывать запросы. Я рекомендую ставить PNG рендеринг логики в отдельный сервис. Поскольку BINARY PHANTOMJS размером примерно 50 МБ, он замедляет развертывание, если вы ничего не измените в API. Кроме того, вы можете повторно использовать эту лямбда для других целей.
Мы начнем с создания WebPack.config.ts (Для пучка исходный код) и Serverless.base.js (Чтобы определить базовую конфигурацию без сервеса) в корневой папке.
Если вы хотите узнать больше о применении случаев конфигураций JavaScript 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 Service
Прежде всего, мы создадим обработчик Это вернет URL сгенерированного изображения. Обработчик должен подтвердить и обрабатывать тело запроса:
… И если все в порядке, он должен генерировать изображение и поместить его в ведро S3.
Давайте создадим WebPack.config.ts Для пучка исходных файлов. Мы будем использовать Copy-WebPack-Plugin и WebPack-permissions-plugin Включить фантовые двоичные файлы в пучок – и дать разрешения для исполнения. Это потребует от нас, чтобы запустить команду развертывания с помощью Sudo, поскольку WebPack не имеет разрешений для изменения прав файловой системы по умолчанию.
Последний шаг будет использовать Serverless.js Файл, чтобы завязать наш обработчик с помощью события Gateway API.
Теперь нам нужно выполнить те же шаги для Статистика обработчика , но нам не нужно вносить какие-либо изменения в webpack.config.ts.
Единственное отличие – это дополнительное разрешение называть лямбда:
iamRoleStatements: [ ...baseConfig.provider.iamRoleStatements,{ Effect: 'Allow', Action: ['lambda:InvokeFunction'], Resource: ['*']}]Настройка слабых бота
Последний шаг будет создать службу, которая будет обрабатывать события сообщения для бота. Чтобы удержать это просто, мы справимся только на упомянутых событиях. Давайте настроим основной обработчик событий.
Мы должны обрабатывать событие проверки от Slack и ответить на 200 параметров статуса и задачи:
callback(null, { body: JSON.stringify({ challenge: (slackEvent as VerificationEvent).challenge }), statusCode: 200});Чтобы правильно обрабатывать слабые событие, конечная точка должна ответить в течение 3000 миллисекунд (3 секунды), поэтому нам придется немедленно ответить и асинхронно отправить последующее сообщение, используя PostMessage API Отказ
В вышеупомянутом коде мы анализируем текст сообщения, чтобы извлечь имя репозитория и вызвало статию изображения Lambda, чтобы получить URL-адрес изображения и отправить сообщение обратно для Slack. Вы можете найти полный код обработчика здесь Отказ
Код для Code Serverless.js и конфигурации WebPack будут похожи на службу статистики, поэтому, если у вас возникли проблемы с настройкой его, посмотрите на Полный исходный код Отказ
Создание Slack App
Теперь давайте создадим новое Slack приложение. Перейти к Slack API Создайте новую учетную запись (если вы еще этого не сделали), создайте новое приложение и добавьте объем бота в секции Scopes.
Перейдите в раздел «OAUTH & Permissions» в боковой панели.
Добавьте прицел пользователя BOT.
Затем вы сможете установить приложение в свою организацию и получить доступ к токенам.
Развертывание услуг
Вам придется установить беспроводную структуру Mersearless больше чем 1,26 Поскольку более ранние версии не поддерживают файлы конфигурации JavaScript. И я рекомендую устанавливать SLX Чтобы упростить развертывание нескольких услуг.
npm install -g serverlessnpm install -g serviceless
Скопируйте токены GitHub и Slack Bot и установите их в переменные среды GitHub_Token и Slack_Token. Запустите следующую команду в терминале:
sudo GITHUB_TOKEN=SLACK_TOKEN= slx deploy all
Как упоминалось выше, нам нужна Sudo для установки размножений Execute для двоичных файлов 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 - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handlerfunctions: 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 - https://xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/{owner}/{repo}functions: getContributorStatsImage: git-stats-dev-getContributorStatsImageServerless: Removing old service versions...Последний шаг будет подписаться на нашу конечную точку до упомяновения бота.
Выберите раздел «Подписка для событий» в навигации SLIC API.
Затем вставьте URL-адрес обработчика событий, который вы можете найти в выходе команды развертывания.
Время играть немного! Вот несколько примеров представленных изображений:
Serverless/Serverless
Facebook/реагирует
plouc/nivo.
Это оно!
Я надеюсь, что вы нашли эту статью полезную. Я хотел бы увидеть в комментариях других видов статистики, которую вы хотели бы видеть в сервисе.
Пожалуйста, хлопайте, если вы наслаждались статьей! И если вы хотите пообщаться или подключиться, вы можете найти меня на Twitter , Github и LinkedIn Отказ