Kuidas ehitada GitHubi bot PhantomJS, React ja Serverless raamistikuga

Kuidas ehitada GitHubi bot PhantomJS, React ja Serverless raamistikuga

See õpetus on lihtsa serverita roboti loomise kohta, mis tagastab valitud perioodi jaoks GitHubi peamiste hoidlate kaasautoritega diagrammi. See on asjakohane neile, kellel on React, JavaScripti, TypeScripti, Node.js, Amazon Web Services (AWS) ja Serverless raamistiku osas mõningaid kogemusi.

Koodiga saate tutvuda Githubis.

Teenused ja tööriistad, mida me kasutame

Enne kodeerimisele hüppamist teeme kiire ülevaate AWS-i teenustest ja kasutatavatest tööriistadest.

Parimate repositooriumi kaasautorite hankimiseks kasutame andmete kuvamiseks GitHubi statistika API-d, hämmastavat Nivo, meie graafiku väljanägemise kontrollimiseks Storybooki, HTML-i pildiks muutmist PhantomJS-i ja AWS-iga suhtlemiseks Serverless-raamistikku.

Alustame

Ma kasutan TypeScripti. Kui eelistate ES6, peate Babeli konfigureerima.

Esiteks peate looma tsconfig.jsonoma hoidla juur. Tähelepanu pööramise võimalused hõlmavad järgmist:

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

Seejärel loome lihtsa API statistika pärimiseks GitHubist. Saate jälgida failistruktuuri GitHubi repost või kasutada oma. Näiteks:

GitHubi API-le pääsemiseks peate looma isikliku juurdepääsuloa.

See moodul saadab lihtsalt päringu koos antud märgiga ja võtab andmed üles.

Graafikute kuvamine

Andmete kuvamiseks kasutame Nivo ja Storybook. Lihtne komponent võib välja näha järgmine:

Kõigepealt seadistage juturaamatud, käivitades juurkaustas järgmise käsu:

npm i -g @storybook/cligetstorybook

Kopeerige kaust .storybook juurhoidlasse ja asendage kõik olemasolevad failid. See sisaldab veebipaketi ja juturaamatu konfiguratsiooni. Looge storieskaust ja lisage oma komponendi jaoks lugu:

Käivitage npm run storybookja avage brauseris localhost. Peaksite nägema järgmist tulemust:

Proovige mängida valikute ja testandmetega. Juturaamat muudab välimust kohe.

HTML-i muutmine PNG-ks

Tavaliselt ei luba sellised vestlussüsteemid nagu Facebook Messenger ja Slack kasutajatel sisestada dialoogi HTML-kaarte, seega on järgmine samm ehitada abimees, mis muudab HTML-i PNG-pildiks.

Kasutades lihtsat skripti koos jsdom-teegiga, saame jäljendada brauseri käitumist ja HTML-i järjestada järgmiselt:

createDomForCharttagastab uue jsdom-i eksemplari ja diagrammi funktsioon lihtsalt helistab, dom.serialize()kui komponentide renderdamine on tehtud.

PhantomJS-i abil saame märgistuse pildiks muuta selle lihtsa skripti abil:

Jälgime associated screenshot.jsarvesse phantomjskäivitatava faili asukoht - koos HTML string, laius ja kõrgus - ja saada tagasi puhver koos sulatatud pilt.

Võite märgata, et olen kasutanud kahte PhantomJS-i binaarkaarti (OS X ja Linuxi jaoks). Vajame AWS-i keskkonnas veel Linuxi versiooni. Saate need alla laadida PhantomJS.org-ist või kasutada faile hoidlast.

Kõigi sidumine

Nüüd loome päringute käsitlemiseks lambda. Soovitan panna PNG renderdamise loogika eraldi teenusesse. Kuna binaarne PhantomJS on umbes 50 MB suurune, aeglustab see juurutamist, kui muudate API-s midagi. Samuti saate seda lambda taaskasutada muudel eesmärkidel.

Alustame juurkataloogis ( webpack.config.tslähtekoodi komplekteerimine) ja serverless.base.js(serverita baaskonfiguratsiooni määratlemiseks).

Kui soovite rohkem teada serverivabade JavaScripti konfiguratsioonide kasutamise juhtumite kohta, võite selle kohta lugeda minu eelmisest artiklist.

Peate muutma juurutus- ja pildirühma nimesid järgmiselt:

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}'},

Seda seetõttu, et kopa nimi peab olema globaalselt ainulaadne.

HTML-i muutmine PNG-teenuseks

Kõigepealt loome käitleja, mis tagastab loodud pildi URL-i. Töötleja peaks valideerima ja töötlema päringu keha:

... ja kui kõik on korras, peaks see pildi genereerima ja S3 ämbrisse panema.

Loome webpack.config.tslähtekoodifailide ühendamiseks. Kasutame copy-webpack-pluginja webpack-permissions-pluginlisame PhantomJS-i kahendfailid paketti - ja anname täitmisõigused. Selleks on meil vaja käsku juurutada sudoga, kuna Webpackil pole vaikimisi õigusi failisüsteemi õiguste muutmiseks.

Viimane samm on serverless.jsfaili kasutamine meie käitleja sidumiseks API lüüsi sündmusega.

Nüüd peame statistikakäitleja jaoks tegema samad toimingud, kuid me ei pea selles muudatusi tegema webpack.config.ts.

Ainus erinevus on täiendav luba lambda kutsumiseks:

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

Slacki boti seadistamine

The last step will be to create a service that will handle message events for the bot. To keep it simple, we’ll handle only mention events. Let’s set up the basic event handler.

We have to handle a verification event from Slack and respond with 200 status and challenge parameters:

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

To properly handle a Slack event, the endpoint has to reply within 3000 milliseconds (3 seconds), so we’ll have to immediately respond and asynchronously send a follow-up message using postMessage API.

In the code above, we parsed the message text to extract a repository name and called out an image stats lambda to retrieve an image URL and send a message back to Slack. You can find the full code of the handler here.

Code for serverless.js and Webpack configurations would be similar to the stats service, so if you have problems with setting it up, take a look at the full source code.

Creating a Slack app

Now let’s create a new Slack app. Go to the Slack API, create a new account (if you have not already done so), create a new app, and add the bot scope in the scopes section.

Go to the “OAuth & Permissions” section in the sidebar.

Add the bot user scope.

Then, you’ll be able to install the app to your organization and get access to tokens.

Deploying the services

You’ll have to install a serverless framework version greater than 1.26 because earlier versions do not support JavaScript configuration files. And I recommend installing slx to simplify the deployment of multiple services.

npm install -g serverlessnpm install -g serviceless

Copy the GitHub and Slack bot tokens, and set them to GITHUB_TOKEN and SLACK_TOKEN environment variables accordingly. Run the following command in the terminal:

sudo GITHUB_TOKEN= SLACK_TOKEN= slx deploy all

As mentioned above, we need sudo to set execute permissions to PhantomJS binaries.

Be patient! Deployment may take a while. At the end you should see a similar output:

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 - //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 - //xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/{owner}/{repo}functions: getContributorStatsImage: git-stats-dev-getContributorStatsImageServerless: Removing old service versions...

The last step will be to subscribe our endpoint to bot mention events.

Select the “Event Subscription” section in the Slack API navigation.

Then paste the event handler URL that you can find in the deploy command output.

Time to play around a bit! Here are some examples of rendered images:

serverless/serverless

facebook/react

plouc/nivo

That’s it!

I hope you found this article helpful. I’d love to see in the comments other types of stats you would like to see in the service.

Plaksutage, kui teile artikkel meeldis! Ja kui soovite vestelda või suhelda, leiate mind Twitterist, GitHubist ja Linkedinist.