de Pavel Vlasov

Cum se construieste un bot GitHub cu cadrul PhantomJS React
Tipul Lego IT bnilsen

Cum se construiește un bot GitHub cu cadrul PhantomJS, React și Serverless

Acest tutorial este despre construirea unui bot simplu Serverless care returnează o diagramă cu cei mai importanți contribuitori ai depozitului GitHub pentru o perioadă selectată. Este relevant pentru cei care au o anumită experiență cu React, JavaScript, TypeScript, Node.js, Amazon Web Services (AWS) și cadrul Serverless.

Puteți verifica codul de pe Github.

Servicii și instrumente pe care le vom folosi

Înainte de a intra în codificare, să facem o prezentare rapidă a serviciilor și instrumentelor AWS pe care le vom folosi.

Pentru a prelua contribuții de top din depozit, vom folosi API-ul statisticilor GitHub, uimitorul Nivo pentru a afișa date, Carte de povești pentru a verifica cum arată și se simte graficul nostru, PhantomJS pentru a transforma HTML în imagine și Cadrul fără server pentru a interacționa cu AWS.

Să începem

Voi folosi TypeScript. Daca preferi ES6, va trebui să configurați Babel.

În primul rând, trebuie să creați tsconfig.json în rădăcina depozitului dvs. Opțiunile de acordat atenție includ:

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

Apoi, vom crea un API simplu pentru interogarea statisticilor de la GitHub. Puteți urmări structura fișierelor din repo GitHub sau puteți utiliza propria dvs. De exemplu:

Pentru a accesa API-ul GitHub, va trebui creați un jeton de acces personal.

Acest modul pur și simplu trimite cererea cu simbolul furnizat și recuperează datele.

Afișarea graficelor

Pentru a afișa datele, vom folosi Nivo și Storybook. O componentă simplă poate arăta astfel:

Mai întâi, configurați Storybooks executând următoarea comandă în folderul rădăcină:

npm i -g @storybook/cligetstorybook

Copiați folderul .storybook în depozitul rădăcină și înlocuiți toate fișierele existente. Conține configurația Webpack și Storybook. Creeaza o stories folder și introduceți un exemplu de poveste pentru componenta dvs.:

Alerga npm run storybook și deschis gazdă locală în browser. Ar trebui să vedeți următorul rezultat:

1611458766 947 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Încercați să vă jucați cu opțiunile și datele de testare. Cartea de povești va schimba aspectul imediat.

Transformarea HTML în PNG

De obicei, sistemele de chat precum Facebook Messenger și Slack nu permit utilizatorilor să introducă carduri HTML în casetă, așa că următorul pas va fi construirea unui ajutor care să redea HTML într-o imagine PNG.

Folosind un script simplu cu jsdom bibliotecă, putem imita comportamentul browserului și serializa HTML, astfel:

createDomForChart returnează o nouă instanță de jsdom, iar funcția grafică apelează pur și simplu dom.serialize() când se face redarea componentelor.

Cu PhantomJS, putem transforma marcajul într-o imagine folosind acest script simplu:

Trecem screenshot.js în phantomjs calea executabilă – împreună cu un șir HTML, lățime și înălțime – și recuperarea tamponului cu imaginea redată.

Este posibil să observați că am folosit două binare PhantomJS (pentru OS X și Linux). Vom avea nevoie în continuare de versiunea Linux într-un mediu AWS. Le puteți descărca de la PhantomJS.org sau utilizați fișiere din depozit.

Legând totul

Acum, să creăm lambda pentru a gestiona cererile. Vă recomand să puneți logica de redare PNG într-un serviciu separat. Deoarece binarul PhantomJS are o dimensiune de aproximativ 50 mb, acesta încetinește implementarea dacă modificați ceva în API. De asemenea, puteți refolosi această lambda în alte scopuri.

Vom începe prin a crea webpack.config.ts (pentru a grupa codul sursă) și serverless.base.js (pentru a defini configurația fără server de bază) în folderul rădăcină.

Dacă doriți să aflați mai multe despre cazurile de utilizare a configurațiilor JavaScript fără server, puteți citiți despre asta în articolul meu anterior.

Va trebui să modificați numele de implementare și de bucăți de imagine, astfel:

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

Acest lucru se datorează faptului că numele cupei trebuie să fie unic la nivel global.

Se transformă HTML în serviciul PNG

În primul rând, vom crea un manipulant care va returna un URL al imaginii generate. Operatorul trebuie să valideze și să proceseze corpul solicitării:

… Și dacă totul este în regulă, ar trebui să genereze imaginea și să o pună într-o găleată S3.

Să creăm webpack.config.ts pentru a grupa fișiere sursă. Vom folosi copy-webpack-plugin și webpack-permissions-plugin să includă binele PhantomJS într-un pachet – și să dea permisiuni pentru execuție. Acest lucru ne va impune să executăm comanda deploy cu sudo, deoarece Webpack nu are permisiuni pentru modificarea implicită a drepturilor sistemului de fișiere.

Ultimul pas va fi utilizarea serverless.js pentru a lega handler-ul nostru cu un eveniment API Gateway.

Acum, trebuie să efectuăm aceiași pași pentru gestionar statistici, dar nu trebuie să facem modificări la webpack.config.ts.

Singura diferență este o permisiune suplimentară pentru a invoca lambda:

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

Configurarea botului Slack

Ultimul pas va fi crearea unui serviciu care va gestiona evenimentele de mesaje pentru bot. Pentru a fi simplu, ne vom ocupa doar de menționarea evenimentelor. Să configurăm gestionarul de evenimente de bază.

Trebuie să gestionăm un eveniment de verificare de la Slack și să răspundem cu 200 de parametri de stare și provocare:

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

Pentru a gestiona corect un eveniment Slack, punctul final trebuie să răspundă în termen de 3000 de milisecunde (3 secunde), așa că va trebui să răspundem imediat și să trimitem un mesaj de urmărire asincron folosind API postMessage.

În codul de mai sus, am analizat textul mesajului pentru a extrage un nume de depozit și am chemat o imagine pentru a prelua o adresă URL a imaginii și a trimite un mesaj înapoi la Slack. Puteți găsi codul complet al handlerului aici.

Codul pentru configurațiile serverless.js și Webpack ar fi similar cu serviciul de statistici, deci dacă aveți probleme cu configurarea acestuia, aruncați o privire la cod sursă complet.

Crearea unei aplicații Slack

Acum să creăm o nouă aplicație Slack. Du-te la API Slack, creați un cont nou (dacă nu ați făcut deja acest lucru), creați o aplicație nouă și adăugați domeniul de aplicare bot în secțiunea domenii.

Accesați secțiunea „OAuth și permisiuni” din bara laterală.

1611458766 976 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Adăugați domeniul de utilizare bot.

1611458767 344 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Apoi, veți putea instala aplicația în organizația dvs. și veți avea acces la jetoane.

1611458767 44 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Implementarea serviciilor

Va trebui să instalați o versiune cadru fără server mai mare de 1,26 deoarece versiunile anterioare nu acceptă fișierele de configurare JavaScript. Și recomand instalarea slx pentru a simplifica implementarea mai multor servicii.

npm install -g serverlessnpm install -g serviceless

Copiați jetoanele GitHub și Slack și setați-le la variabilele de mediu GITHUB_TOKEN și SLACK_TOKEN în consecință. Rulați următoarea comandă în terminal:

sudo GITHUB_TOKEN=<your token> SLACK_TOKEN=<your slack token> slx deploy all

Așa cum am menționat mai sus, avem nevoie de sudo pentru a seta permisiunile de executare la binare PhantomJS.

Fii răbdător! Implementarea poate dura ceva timp. La final ar trebui să vedeți o ieșire similară:

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

Ultimul pas va fi să vă abonați la punctul nostru final la evenimentele menționate de bot.

Selectați secțiunea „Abonament eveniment” din navigarea API Slack.

1611458768 814 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Apoi lipiți adresa URL a gestionarului de evenimente pe care o puteți găsi în ieșirea comenzii deploy.

1611458768 60 Cum se construieste un bot GitHub cu cadrul PhantomJS React

E timpul să ne jucăm puțin! Iată câteva exemple de imagini redate:

fără server / fără server

1611458769 525 Cum se construieste un bot GitHub cu cadrul PhantomJS React

facebook / reacționează

1611458769 241 Cum se construieste un bot GitHub cu cadrul PhantomJS React

plouc / nivo

1611458769 201 Cum se construieste un bot GitHub cu cadrul PhantomJS React

Asta e!

Sper că ți s-a părut util acest articol. Mi-ar plăcea să văd în comentarii alte tipuri de statistici pe care ați dori să le vedeți în serviciu.

Vă rugăm să bateți palma dacă v-a plăcut articolul! Și dacă doriți să conversați sau să vă conectați, mă puteți găsi pe Stare de nervozitate, GitHub și Linkedin.