Kako izraditi GitHub bot s PhantomJS, React i Serverless okvirom

Programiranje

Kako izraditi GitHub bot s PhantomJS, React i Serverless okvirom

Ovaj se vodič bavi izradom jednostavnog bota bez poslužitelja koji vraća grafikon s glavnim suradnicima GitHub repozitorija za odabrano razdoblje. To je relevantno za one koji imaju određeno iskustvo s Reactom, JavaScriptom, TypeScriptom, Node.jsom, Amazon Web Services (AWS) i Serverless okvirom.

Kôd možete provjeriti na Githubu.

Usluge i alati koje ćemo koristiti

Prije skoka u kodiranje, napravimo kratki pregled AWS usluga i alata koje ćemo koristiti.

Za pronalaženje najboljih suradnika u spremištu koristit ćemo API za statistiku GitHub, nevjerojatni Nivo za prikaz podataka, Storybook kako bismo provjerili kako naš grafikon izgleda i osjeća se, PhantomJS za pretvaranje HTML-a u sliku i Frameless Server okvir za interakciju s AWS-om.

Započnimo

Koristit ću TypeScript. Ako više volite ES6, morat ćete konfigurirati Babel.

Prvo, morate stvoriti tsconfig.jsonu korijenu svog spremišta. Opcije na koje treba obratiti pažnju uključuju:

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

Zatim ćemo stvoriti jednostavan API za postavljanje upita iz GitHub-a. Možete pratiti strukturu datoteka iz GitHub repo-a ili koristiti vlastiti. Na primjer:

Da biste pristupili GitHub API-ju, morat ćete stvoriti token za osobni pristup.

Ovaj modul jednostavno šalje zahtjev s priloženim tokenom i dohvaća podatke.

Prikaz grafikona

Za prikaz podataka koristit ćemo Nivo i Storybook. Jednostavna komponenta može izgledati ovako:

Prvo postavite Storybooks pokretanjem sljedeće naredbe u korijenskoj mapi:

npm i -g @storybook/cligetstorybook

Kopirajte mapu .storybook u korijensko spremište i zamijenite sve postojeće datoteke. Sadrži Webpack i Storybook konfiguraciju. Stvorite storiesmapu i stavite uzorak priče za svoju komponentu:

Pokrenite npm run storybooki otvorite localhost u pregledniku. Trebali biste vidjeti sljedeći rezultat:

Pokušajte se poigrati opcijama i podacima o testiranju. Knjiga priča odmah će promijeniti izgled.

Pretvaranje HTML-a u PNG

Sustavi za chat poput Facebook Messengera i Slacka obično ne dopuštaju korisnicima da umetnu HTML kartice u dijaloški okvir, pa će sljedeći korak biti izgradnja pomagača koji HTML prikazuje u PNG sliku.

Pomoću jednostavne skripte s jsdom bibliotekom možemo oponašati ponašanje preglednika i serializirati HTML, poput ovog:

createDomForChartvraća novu instancu jsdom, a funkcija grafikona jednostavno poziva dom.serialize()kada se izvrši prikazivanje komponenata.

Uz PhantomJS možemo oznaku pretvoriti u sliku pomoću ove jednostavne skripte:

Prolazimo screenshot.jsu phantomjsizvršnu stazu - zajedno s HTML nizom, širinom i visinom - i vraćamo međuspremnik s prikazanom slikom.

Možda ćete primijetiti da koristim dvije binarne datoteke PhantomJS (za OS X i Linux). Verzija Linuxa trebat će nam dalje u AWS okruženju. Možete ih preuzeti s PhantomJS.org ili koristiti datoteke iz spremišta.

Sve sveže

Sada, kreirajmo lambda-u za obradu zahtjeva. Preporučujem da logiku PNG prikazivanja stavite u zasebnu uslugu. Budući da je binarna datoteka PhantomJS približno 50 mb, usporava implementaciju ako promijenite bilo što u API-ju. Također, ovu lambdu možete ponovno koristiti u druge svrhe.

Počet ćemo s stvaranjem webpack.config.ts(za spajanje izvornog koda) i serverless.base.js(za definiranje osnovne konfiguracije bez poslužitelja) u korijenskoj mapi.

Ako želite saznati više o slučajevima upotrebe JavaScript konfiguracija bez poslužitelja, o tome možete pročitati u mom prethodnom članku.

Morat ćete promijeniti nazive implementacije i segmenta slika, ovako:

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

To je zato što naziv segmenta mora biti globalno jedinstven.

Pretvaranje HTML-a u PNG uslugu

Prije svega, stvorit ćemo obrađivač koji će vratiti URL generirane slike. Voditelj treba provjeriti i obraditi tijelo zahtjeva:

... i ako je sve u redu, trebao bi generirati sliku i staviti je u S3 kantu.

Stvorimo webpack.config.tsza grupiranje izvornih datoteka. Upotrijebit ćemo copy-webpack-plugini webpack-permissions-pluginkako bismo uključili binarne datoteke PhantomJS u snop - i dali dozvole za izvršenje. To će zahtijevati da pokrenemo naredbu za implementaciju sa sudo, jer Webpack nema dopuštenja za izmjenu prava sustava datoteka prema zadanim postavkama.

Posljednji korak bit će upotreba serverless.jsdatoteke za povezivanje našeg obrađivača s API Gateway događajem.

Sada moramo izvesti iste korake za rukovatelj statistikama, ali ne moramo unositi nikakve promjene webpack.config.ts.

Jedina razlika je dodatno dopuštenje za pozivanje lambda-e:

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

Postavljanje Slack bota

Posljednji korak bit će stvaranje usluge koja će obrađivati ​​događaje poruka za bota. Da budemo jednostavni, bavit ćemo se samo spomenutim događajima. Postavimo osnovni obrađivač događaja.

Moramo obraditi događaj provjere iz Slacka i odgovoriti s 200 parametara statusa i izazova:

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

Da bi ispravno obrađivao Slack događaj, krajnja točka mora odgovoriti u roku od 3000 milisekundi (3 sekunde), tako da ćemo morati odmah odgovoriti i asinkrono poslati daljnju poruku pomoću API-ja postMessage.

U gornjem kodu raščlanili smo tekst poruke kako bismo izdvojili ime spremišta i pozvali lambda statistiku slike kako bismo dohvatili URL slike i poslali poruku natrag u Slack. Cjeloviti kod rukovatelja možete pronaći ovdje.

Kôd za konfiguracije serverless.js i Webpack bio bi sličan usluzi statistike, pa ako imate problema s postavljanjem, pogledajte puni izvorni kod.

Izrada aplikacije Slack

Ajmo sada stvoriti novu Slack aplikaciju. Idite na Slack API, stvorite novi račun (ako to već niste učinili), izradite novu aplikaciju i dodajte opseg bota u odjeljak opsega.

Idite na odjeljak "OAuth & Permissions" na bočnoj traci.

Dodajte opseg korisnika bota.

Tada ćete moći instalirati aplikaciju u svoju organizaciju i dobiti pristup tokenima.

Uvođenje usluga

Morat ćete instalirati verziju okvira bez poslužitelja veću od 1,26 jer starije verzije ne podržavaju JavaScript konfiguracijske datoteke. I preporučujem instaliranje slx-a radi pojednostavljivanja implementacije više usluga.

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.

Please clap if you enjoyed the article! And if you’d like to chat or connect, you can find me on Twitter, GitHub and Linkedin.