Lego IT kaveri lähettäjä bnilsen

Kuinka rakentaa GitHub-botti PhantomJS-, React- ja Serverless-kehysten avulla

Tämä opetusohjelma koskee yksinkertaisen palvelimettoman robotin rakentamista, joka palauttaa kaavion GitHub-arkiston parhaiden avustajien kanssa valitulle ajanjaksolle. Se on merkityksellinen niille, joilla on jonkin verran kokemusta Reaktin, JavaScriptin, TypeScriptin, Node.js: n, Amazon Web Services (AWS) ja Serverless-kehysten käytöstä.

Voit tarkistaa koodin Githubista.

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

Ennen kuin siirrymme koodaukseen, teemme pikakatsauksen käyttämiin AWS-palveluihin ja työkaluihin.

Hakeaksemme parhaita säilytysyhteisön avustajia käytämme GitHub stats API -sovellusta, hämmästyttävää Nivoa tietojen näyttämiseen, Storybook tarkistaaksesi, miten kaaviomme näyttää ja miltä, ​​PhantomJS muuttaa HTML: n kuvaksi ja Serverless-kehys vuorovaikutukseen AWS: n kanssa.

Aloitetaan

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

Ensin sinun on luotava tsconfig.json arkiston juureen. Vaihtoehdot kiinnittää huomiota muun muassa:

"module": "commonjs",
"kohde": "es5",
"lib": ["es6", "esnext.asynciterable"],
"moduleResolution": "solmu",
"jsx": "reagoi"

Sitten luomme yksinkertaisen sovellusliittymän, jolla voidaan kysyä tilastoja GitHubilta. Voit seurata tiedostorakennetta GitHub-repo-tiedostosta tai käyttää omaa tiedostoasi. Esimerkiksi:

GitHub-sovellusliittymään pääsemiseksi sinun on luotava henkilökohtainen käyttöoikeustunnus.

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

Kaavioiden näyttäminen

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

Asenna ensin Storybooks suorittamalla seuraava komento juurihakemistossa:

npm i -g @ satukirja / cli
getstorybook

Kopioi .storybook-kansio juurivarastoon ja korvaa kaikki olemassa olevat tiedostot. Se sisältää Webpack- ja Storybook-määritykset. Luo tarina-kansio ja laita osa tarinaan:

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

Yritä pelata vaihtoehtoilla ja testata tietoja. Storybook muuttaa ulkoasua heti.

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 askel on rakentaa avustaja, joka muodostaa HTML: n PNG-kuvaan.

Käyttämällä yksinkertaista skriptiä jsdom-kirjaston kanssa, voimme jäljitellä selaimen käyttäytymistä ja sarjoittaa HTML: ää seuraavasti:

createDomForChart palauttaa uuden jsdom-esiintymän, ja kaaviofunktio kutsuu yksinkertaisesti dom.serialize () -komponenttia, kun komponenttien renderointi tapahtuu.

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

Olemme siirtämässä screenshot.js Phantomjs-suoritettavalle polulle - yhdessä HTML-merkkijonon, leveyden ja korkeuden kanssa - ja saamme takaisin puskurin renderoidun kuvan kanssa.

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

Sitominen kaikki

Luodaan nyt lambda käsittelemään pyyntöjä. Suosittelen, että PNG-mallinnuslogiikka otetaan erilliseen palveluun. Koska PhantomJS-binaarikoko on noin 50 Mt, se hidastaa käyttöönottoa, jos muutat jotain sovellusliittymässä. Voit myös käyttää tätä lambdaa muihin tarkoituksiin.

Aloitamme luomalla juurikansioon webpack.config.ts (niputtaaksesi lähdekoodin) ja serverless.base.js (määrittääksesi palvelimettoman peruskokoonpanon).

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

Sinun on muutettava käyttöönotto- ja kuva-osien nimiä, kuten tämä:

deploymentBucket: {
    nimi: 'com.github-stats .... deploys'
},
ympäristö: {
    BUCKET: 'com.github-stats .... images',
    GITHUB_TOKEN: '$ {env: GITHUB_TOKEN}',
    SLACK_TOKEN: '$ {env: SLACK_TOKEN},
    VAIHE: '$ {itse: Provide.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öelin:

... ja jos kaikki on kunnossa, sen pitäisi luoda kuva ja laittaa se S3-ämpäriin.

Luodaan webpack.config.ts niputtaaksesi lähdetiedostot. Käytämme copy-webpack-plugin ja webpack-permissions-plugin sisällyttääksemme PhantomJS-binaareja kimppuun - ja antaaksemme luvat suorittamiseen. Tämä vaatii meitä suorittamaan käyttöönottokomennon sudo-ohjelmalla, koska Webpackilla ei ole oletuksena oikeuksia muokata tiedostojärjestelmän oikeuksia.

Viimeisessä vaiheessa käytetään serverless.js-tiedostoa käsittelijän sitomiseen API Gateway -tapahtumaan.

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

Ainoa ero on lisälupa lambdan käyttämiseen:

iamRoleStatements: [... baseConfig.provider.iamRoleStatements,
{
    Vaikutus: 'Salli',
    Toimi: ['lambda: InvokeFunction'],
    Resurssi: ['*']
}]

Slack-botin asettaminen

Viimeinen vaihe on palvelun luominen, joka käsittelee botin viestitapahtumia. Jotta se olisi yksinkertaista, käsittelemme vain tapahtumia. Perustetaan tapahtuman peruskäsittelijä.

Meidän on käsiteltävä varmistustapahtumaa Slackista ja vastattava 200 tila- ja haasteparametrilla:

soittopyyntö (nolla, {
   runko: JSON.stringify ({
     haaste: (slackEvent kuin VerificationEvent) .haaste
   }),
   statusCode: 200
});

Jotta Slack-tapahtuma voidaan käsitellä oikein, päätepisteen on vastattava 3000 millisekunnin (3 sekunnin) sisällä, joten meidän on välittömästi vastattava ja lähetettävä asynkronisesti seurantatiedot viestillä postMessage API.

Yllä olevassa koodissa jäsentimme viestin tekstin arkiston nimen purkamiseksi ja kutsuimme kuvatilastot lambda noutamaan kuvan URL-osoitteen ja lähettämään viestin takaisin Slackille. Löydät käsittelijän täyden koodin täältä.

Serverless.js- ja Webpack-kokoonpanojen koodi olisi samanlainen kuin stats-palvelu, joten jos sinulla on ongelmia sen määrittämisessä, katso koko lähdekoodia.

Slack-sovelluksen luominen

Luotaan nyt uusi Slack-sovellus. Siirry Slack-sovellusliittymään, luo uusi tili (jos et ole vielä tehnyt niin), luo uusi sovellus ja lisää botin ala-alue.

Siirry sivupalkin OAuth ja käyttöoikeudet -osaan.

Lisää bot-käyttäjän laajuus.

Sitten voit asentaa sovelluksen organisaatioosi ja saada käyttöoikeuksia kuvakkeisiin.

Palveluiden käyttöönotto

Sinun on asennettava serveritön runkoversio, joka on suurempi kuin 1,26, koska aikaisemmat versiot eivät tue JavaScriptin määritystiedostoja. Ja suosittelen slx: n asentamista monien palvelujen käyttöönoton yksinkertaistamiseksi.

npm install -g palvelimeton
npm install -g huolimaton

Kopioi GitHub- ja Slack-botitunnukset ja aseta ne vastaavasti GITHUB_TOKEN- ja SLACK_TOKEN-ympäristömuuttujiin. Suorita seuraava komento terminaalissa:

sudo GITHUB_TOKEN =  SLACK_TOKEN =  slx ottaa kaikki käyttöön

Kuten edellä mainittiin, tarvitsemme sudo asettaaksesi käyttöoikeudet PhantomJS-binaareille.

Ole kärsivällinen! Käyttöönotto voi viedä hetken. Lopussa sinun pitäisi nähdä samanlainen tulos:

Käyttöönotto onnistui
[sovellus / html-to-png] [valmis]:
Palvelun tiedot
palvelu: html-to-png
vaihe: dev
alue: us-itä-1
pino: html-png-dev
api-avaimet:
   Ei mitään
tehomuuttujilla
   Ei mitään
toiminnot:
   renderToPng: html-to-png-dev-renderToPng
Palvelimeton: vanhojen palveluversioiden poistaminen ...
[sovellus / löysä] [valmis]:
Palvelun tiedot
palvelu: git-stats-löysä
vaihe: dev
alue: us-itä-1
pino: git-stats-slack-dev
api-avaimet:
   Ei mitään
tehomuuttujilla
   POST - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handler
toiminnot:
   eventHandler: git-stats-slack-dev-eventHandler
Palvelimeton: vanhojen palveluversioiden poistaminen ...
[sovellus / tilastot] [valmis]:
Palvelun tiedot
palvelu: git-tilastot
vaihe: dev
alue: us-itä-1
pino: git-stats-dev
api-avaimet:
   Ei mitään
tehomuuttujilla
   GET - https://xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/{owner}/{repo}
toiminnot:
   getContributorStatsImage: git-stats-dev-getContributorStatsImage
Palvelimeton: vanhojen palveluversioiden poistaminen ...

Viimeinen vaihe on tilata päätepisteemme bot-mainintatapahtumiin.

Valitse Slack API -navigoinnista ”Event Subscription” -osa.

Liitä sitten tapahtumakäsittelijän URL-osoite, joka löytyy käyttöönottokomennon tuotosta.

Aika leikkiä vähän! Tässä on esimerkkejä sulautetuista kuvista:

serverless / serverless

facebook / reagoivat

plouc / nivo

Se siitä!

Toivottavasti löydät artikkelista apua. Haluaisin nähdä kommentteissa muun tyyppisiä tilastoja, jotka haluaisit nähdä palvelussa.

Taputtele, jos nautit artikkelista! Ja jos haluat keskustella tai ottaa yhteyttä, löydät minut Twitteristä, GitHubista ja Linkedinistä.