Lego IT kutt bnilseni järgi

Kuidas luua GitHubi bot PhantomJS, React ja Serverless raamistikuga?

See õpetus on mõeldud lihtsa serverivaba boti ehitamiseks, mis tagastab diagrammi valitud perioodi parimate GitHubi hoidla kaastöötajatega. See on asjakohane neile, kellel on kogemusi Reakti, JavaScripti, TypeScripti, Node.js, Amazoni veebiteenuste (AWS) ja serverita raamistikuga.

Koodi saate vaadata Githubist.

Teenused ja tööriistad, mida me kasutame

Enne kui hakkame kodeerima, teeme kiire ülevaate AWS-i teenustest ja tööriistadest, mida me kasutame.

Parimate hoidlate kaastöötajate leidmiseks kasutame GitHubi statistika API-d, andmete kuvamiseks hämmastavat Nivo, Storybook, et kontrollida meie diagrammi väljanägemist ja tundmist, PhantomJS HTML-i muutmiseks pildiks ja Serverivaba raamistik AWS-iga suhtlemiseks.

Alustame

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

Esiteks peate oma hoidla juurest looma tsconfig.jsoni. Valikud, millele tähelepanu pöörata, hõlmavad järgmist:

"moodul": "commonjs",
"sihtmärk": "es5",
"lib": ["es6", "esnext.asynciterable"],
"moduleResolution": "sõlm",
"jsx": "reageerima"

Seejärel loome GitHubi statistikast päringute tegemiseks lihtsa API-liidese. Failistruktuuri saate jälgida GitHubi repost või kasutada oma. Näiteks:

GitHubi API-liidese juurde pääsemiseks peate looma isikliku juurdepääsu loa.

See moodul saadab päringu lihtsalt kaasasoleva loaga ja hangib andmed tagasi.

Diagrammide kuvamine

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

Esmalt seadistage Storybooks, käivitades juurkaustas järgmise käsu:

npm i -g @ juturaamat / kl
saab raamaturaamatut

Kopeerige kaust .storybook juurhoidlasse ja asendage kõik olemasolevad failid. See sisaldab Webpacki ja Storybooki konfiguratsiooni. Loo lugude kaust ja pane oma komponendi jaoks lugu lugu:

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

Proovige mängida valikutega ja testida andmeid. Juturaamat muudab kohe ilmet.

HTML-i muutmine PNG-ks

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

Kasutades lihtsat skripti jsdomi teegiga, saame imiteerida brauseri käitumist ja HTML-i seeriastada järgmiselt:

createDomForChart tagastab uue jsdomi eksemplari ja diagrammi funktsioon kutsub komponentide renderdamise korral lihtsalt dom.serialize ().

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

Edastame screenshot.js fantoomide käivitatava tee koos HTML-i stringi, laiuse ja kõrgusega ning saame taastatud kujutisega puhvri.

Võite märgata, et olen kasutanud kaht PhantomJS binaari (OS X ja Linux jaoks). AWS-keskkonnas vajame veel Linuxi versiooni. Saate need alla laadida saidist PhantomJS.org või kasutada hoidla faile.

Kõigi sidumine

Nüüd loome päringute töötlemiseks lambda. Soovitan panna PNG renderdusloogika eraldi teenusesse. Kuna PhantomJS binaarne on umbes 50 mb, aeglustab see juurutamist, kui muudate midagi API-s. Samuti saate seda lambdat uuesti kasutada muudel eesmärkidel.

Alustuseks loome juurkausta veebipack.config.ts (lähtekoodi komplekteerimiseks) ja serverless.base.js (serverivaba põhikonfiguratsiooni määratlemiseks).

Kui soovite lisateavet serverivaba JavaScripti konfiguratsioonide kasutamise kohta, saate selle kohta lugeda minu eelmisest artiklist.

Peate muutma juurutus- ja kujutiseämbrite nimesid, näiteks järgmiselt:

deploymentBucket: {
    nimi: 'com.github-stats .... juurutab'
},
keskkond: {
    BUCKET: 'com.github-statistika .... pildid',
    GITHUB_TOKEN: '$ {env: GITHUB_TOKEN}',
    SLACK_TOKEN: '$ {env: SLACK_TOKEN},
    Etapp: '$ {self: Provide.stage}'
},

Selle põhjuseks on asjaolu, et kopa nimi peab olema ülemaailmselt ainulaadne.

HTML-i muutmine PNG-teenuseks

Esiteks loome käitleja, kes tagastab genereeritud pildi URL-i. Käitleja peaks päringu sisu valideerima ja töötlema:

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

Looge lähtefailide komplekteerimiseks veebipack.config.ts. PhantomJS-i binaarfailide komplekti kaasamiseks ja täitmiseks lubade andmiseks kasutame pistikprogrammi copy-webpack-plugin ja webpack-permissions-plugin. See nõuab, et me käivitaksime juurutamiskäsu sudo abil, kuna Webpackil pole vaikimisi õigusi failisüsteemi õiguste muutmiseks.

Viimane samm on faili serverless.js kasutamine, et siduda meie töötleja API Gateway sündmusega.

Nüüd peame statistika käitleja jaoks tegema samad toimingud, kuid me ei pea veebipaketis.config.ts muudatusi tegema.

Ainus erinevus on täiendav luba lambda kutsumiseks:

iamRoleStatements: [... baseConfig.provider.iamRoleStatements,
{
    Efekt: 'Luba',
    Toiming: ['lambda: InvokeFunction'],
    Allikas: ['*']
}]

Slack-boti seadistamine

Viimane samm on teenuse loomine, mis haldab robotite sõnumite sündmusi. Lihtsuse huvides käsitleme ainult sündmusi. Seadistame põhiliste sündmuste käitleja.

Peame hakkama kontrollima Slacki kinnitusjuhtumit ja vastama 200 oleku ja väljakutseparameetriga:

tagasihelistamine (null, {
   keha: JSON.stringify ({
     väljakutse: (slackEvent kui VerificationEvent) .challenge
   }),
   olekukood: 200
});

Lõtva sündmuse korrektseks käitlemiseks peab lõpp-punkt vastama 3000 millisekundi (3 sekundi) jooksul, nii et peame viivitamatult reageerima ja asünkroonselt saatma järelteate, kasutades postMessage API-d.

Ülaltoodud koodis parserisime hoidla nime ekstraheerimiseks sõnumi teksti ja kutsusime pildi statistika välja lambda, et saada pildi URL ja saata sõnum tagasi Slackile. Käitleja täieliku koodi leiate siit.

Serverless.js ja Webpacki konfiguratsioonide kood sarnaneb statistikateenusega, nii et kui teil on selle seadistamisega probleeme, siis tutvuge kogu lähtekoodiga.

Rakenduse Slack loomine

Nüüd loome uue rakenduse Slack. Minge Slacki API-le, looge uus konto (kui te pole seda juba teinud), looge uus rakendus ja lisage botide ulatus jaotisesse Ulatus.

Minge külgriba jaotisesse OAuth ja õigused.

Lisage bot-kasutaja ulatus.

Seejärel saate rakenduse oma organisatsiooni installida ja pääseda juurde lubadele.

Teenuste juurutamine

Peate installima serverita raamiversiooni, mis on suurem kui 1.26, kuna vanemad versioonid ei toeta JavaScripti konfiguratsioonifaile. Ja mitmete teenuste juurutamise lihtsustamiseks soovitan installida slx.

npm install -g serverivaba
npm install -g teenindamata

Kopeerige GitHubi ja Slacki robotilõigud ning seadke need vastavalt keskkonnamuutujatele GITHUB_TOKEN ja SLACK_TOKEN. Käivitage terminalis järgmine käsk:

sudo GITHUB_TOKEN =  SLACK_TOKEN =  slx juurutab kõik

Nagu eespool mainitud, peame PhantomJS binaaride jaoks käitamisõiguste seadmiseks sudo.

Ole kannatlik! Juurutamine võib võtta natuke aega. Lõpus peaks nägema sarnast väljundit:

Juurutamine õnnestus
[rakendus / html-to-png] [lõpule viidud]:
Teeninduse teave
teenus: html-png
etapp: dev
piirkond: us-ida-1
pinu: html-png-dev
api võtmed:
   Puudub
lõpp-punktid:
   Puudub
funktsioonid:
   renderToPng: html-to-png-dev-renderToPng
Serverita: vanade teenusversioonide eemaldamine ...
[rakendus / lõtv] [lõpule viidud]:
Teeninduse teave
teenus: git-stats-lõtv
etapp: dev
piirkond: us-ida-1
stäkk: git-stats-slack-dev
api võtmed:
   Puudub
lõpp-punktid:
   POST - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handler
funktsioonid:
   eventHandler: git-stats-slack-dev-eventHandler
Serverita: vanade teenusversioonide eemaldamine ...
[rakendus / statistika] [lõpule viidud]:
Teeninduse teave
teenus: statistika
etapp: dev
piirkond: us-ida-1
stäkk: git-stats-dev
api võtmed:
   Puudub
lõpp-punktid:
   GET - https://xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/{owner}/{repo}
funktsioonid:
   getContributorStatsImage: git-stats-dev-getContributorStatsImage
Serverita: vanade teenusversioonide eemaldamine ...

Viimane samm on meie lõpp-punkti tellimine sündmuste bot-mainimiseks.

Valige jaotises Slack API navigeerimise jaotis „Sündmuse tellimine”.

Seejärel kleepige sündmuste käitleja URL, mille leiate juurutamiskäsu väljundist.

Aeg natuke ringi mängida! Siin on mõned näited renderdatud piltide kohta:

serverita / serverita

facebook / reageeri

plouc / nivo

See selleks!

Loodetavasti leidsite sellest artiklist abi. Mulle meeldiks näha kommentaarides muud tüüpi statistikat, mida soovite teenuses näha.

Palun plaksutage, kui teile artikkel meeldis! Ja kui soovite vestelda või ühendust võtta, leiate mind Twitterist, GitHubist ja Linkedinist.