Kuinka rakentaa GitHub-botti PhantomJS-, React- ja Serverless-kehyksillä

Kuinka rakentaa GitHub-botti PhantomJS-, React- ja Serverless-kehyksillä

Tämä opetusohjelma on yksinkertaisen palvelimettoman botin rakentaminen, joka palauttaa kaavion, jossa on GitHub-arkiston parhaat avustajat valitulle ajanjaksolle. Sillä on merkitystä niille, joilla on jonkin verran kokemusta Reactista, JavaScriptistä, TypeScriptistä, Node.js: stä, Amazon Web Servicesistä (AWS) ja Serverless-kehyksestä.

Voit tarkistaa koodin Githubista.

Palvelut ja työkalut, joita käytämme

Ennen kuin siirryt koodaamiseen, tehdään nopea yleiskatsaus AWS-palveluista ja työkaluista, joita käytämme.

Suurimpien arkistojen avustajien hakemiseksi käytämme GitHub stats -sovellusliittymää, hämmästyttävää Nivoa tietojen näyttämiseen, Storybookia tarkistamaan kaavion ulkoasun ja tunteen, PhantomJS: n muuttamaan HTML: stä kuvaksi ja Serverless-kehystä vuorovaikutukseen AWS: n kanssa.

Aloitetaan

Käytän TypeScriptiä. Jos haluat ES6: n, sinun on määritettävä Babel.

Ensin sinun on luotava tsconfig.jsonarkiston juuressa. Mahdollisuudet kiinnittää huomiota:

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

Sitten luomme yksinkertaisen API: n kyselemään tilastoja GitHubista. Voit seurata tiedostorakennetta GitHub-reposta tai käyttää omaa. Esimerkiksi:

Voit käyttää GitHub-sovellusliittymää luomalla henkilökohtaisen käyttöoikeustunnuksen.

Tämä moduuli yksinkertaisesti lähettää pyynnön mukana toimitetulla tunnuksella ja noutaa tiedot.

Kaavioiden näyttäminen

Tietojen näyttämiseen käytämme Nivoa ja Storybookia. Yksinkertainen komponentti voi näyttää tältä:

Asenna ensin satukirjat suorittamalla seuraava komento juurikansiossa:

npm i -g @storybook/cligetstorybook

Kopioi .storybook-kansio juurivarastoon ja korvaa kaikki olemassa olevat tiedostot. Se sisältää Webpack- ja Storybook-määritykset. Luo storieskansio ja laita komponenttisi esimerkkitarina:

Suorita npm run storybookja avaa localhost selaimessa. Sinun pitäisi nähdä seuraava tulos:

Yritä pelata vaihtoehdoilla ja testitiedoilla. Satukirja muuttaa ulkoasua välittömästi.

HTML: n muuttaminen PNG: ksi

Yleensä chat-järjestelmät, kuten Facebook Messenger ja Slack, eivät salli käyttäjien lisätä HTML-kortteja valintaikkunaan, joten seuraava vaihe on rakentaa auttaja, joka tekee HTML: stä PNG-kuvan.

Käyttämällä yksinkertaista komentosarjaa jsdom-kirjastolla voimme jäljitellä selaimen käyttäytymistä ja sarjoittaa HTML-koodia seuraavasti:

createDomForChartpalauttaa uuden jsdom-ilmentymän, ja kaaviofunktio yksinkertaisesti kutsuu, dom.serialize()kun komponenttien hahmontaminen on valmis.

PhantomJS: n avulla voimme muuttaa merkinnät kuvaksi käyttämällä tätä yksinkertaista komentosarjaa:

Olemme kulkee screenshot.jssuoraan phantomjsohjelman polku - yhdessä HTML merkkijono, leveys ja korkeus - ja saada takaisin puskurin toistetun kuvan.

Saatat huomata, että olen käyttänyt kahta PhantomJS-binaaria (OS X: lle ja Linuxille). Tarvitsemme Linux-version edelleen AWS-ympäristössä. Voit ladata ne PhantomJS.org-palvelusta tai käyttää tiedostoja arkistosta.

Kaiken sitominen

Luodaan nyt lambda pyyntöjen käsittelemiseksi. Suosittelen PNG-renderöintilogiikan sijoittamista erilliseen palveluun. Koska PhantomJS-binaarikoko on noin 50 Mt, se hidastaa käyttöönottoa, jos muutat mitään sovellusliittymässä. Voit myös käyttää tätä lambdaa muihin tarkoituksiin.

Aloitamme luomalla juurikansioon webpack.config.ts(lähdekoodin niputtamiseksi) ja serverless.base.js(palvelinasemattoman kokoonpanon määrittämiseksi).

Jos haluat tietää enemmän palvelimettomien JavaScript-kokoonpanojen käyttötapauksista, voit lukea siitä edellisestä artikkelistani.

Sinun on muutettava käyttöönotto- ja kuvaryhmän nimiä seuraavasti:

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

Tämä johtuu siitä, että kauhan nimen on oltava maailmanlaajuisesti ainutlaatuinen.

HTML: n muuttaminen PNG-palveluksi

Ensinnäkin luomme käsittelijän, joka palauttaa luodun kuvan URL-osoitteen. Käsittelijän tulee vahvistaa ja käsitellä pyyntörunko:

… Ja jos kaikki on kunnossa, sen tulisi luoda kuva ja laittaa se S3-ämpäriin.

Luodaan webpack.config.tsniputtaa lähdetiedostot. Käytämme copy-webpack-pluginja webpack-permissions-pluginsisällytämme PhantomJS-binäärit pakettiin - ja annamme käyttöoikeudet suoritukseen. Tämä vaatii meitä suorittamaan käyttöönottokomennon sudolla, koska Webpackilla ei ole oikeuksia muokata tiedostojärjestelmän oikeuksia oletusarvoisesti.

Viimeinen vaihe on käyttää serverless.jstiedostoa sitomaan käsittelijä API-yhdyskäytävän tapahtumaan.

Nyt meidän on suoritettava samat vaiheet tilastokäsittelijälle, mutta meidän ei tarvitse tehdä muutoksia webpack.config.ts.

Ainoa ero on lisälupa kutsua lambda:

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

Slack-botin määrittäminen

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.

Taputa, jos pidit artikkelista! Ja jos haluat keskustella tai muodostaa yhteyden, voit löytää minut Twitteristä, GitHubista ja Linkedinistä.