Lego IT oğlan tərəfindən bnilsen

PhantomJS, React və Serverless Framework istifadə edərək GitHub botu necə qurmaq olar

Bu təlimatda, seçilmiş bir müddət üçün GitHub deposuna əsas köməkçilərin diaqramını qaytaracaq sadə bir serversiz bot yaradacağıq. React, JavaScript, TypeScript, Node.js, Amazon Web Services (AWS) və serversiz çərçivə ilə təcrübəsi olanlara aiddir.

Kodu Github'da yoxlaya bilərsiniz.

İstifadə etdiyimiz xidmətlər və alətlər

Kodlamağa başlamazdan əvvəl istifadə etdiyimiz AWS xidmətlərinə və alətlərinə tez nəzər yetirin.

Əsas depozit ianəçilərini cəlb etmək üçün GitHub Statistics API-dən, məlumatları göstərmək üçün İnanılmaz Nivo-dan, qrafikimizin necə göründüyünü və işlək vəziyyətini nəzərdən keçirmək üçün Storybook-dan, HTML-i bir şəkilə çevirmək üçün PhantomJS-dən və qarşılıqlı əlaqə qurmaq üçün serversiz çərçivədən istifadə edəcəyik. AWS.

Gəlin başlayaq

TypeScript istifadə edirəm. ES6-nı seçsəniz, Babel'i konfiqurasiya etməlisiniz.

Əvvəlcə deposunuzun kökündə tsconfig.json yaratmalısınız. Diqqət yetiriləcək bəzi seçimlər bunlardır:

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

Sonra GitHub-dan statistika sorğusu etmək üçün sadə bir API yaradacağıq. Fayl quruluşunu GitHub reposundan izləyə və ya özünüz istifadə edə bilərsiniz. Misal üçün:

GitHub API-yə daxil olmaq üçün şəxsi giriş işarəsi yaratmalısınız.

Bu modul, sadəcə təqdim olunan jetonla sorğu göndərir və məlumatları alır.

Qrafikləri göstərin

Veriləri göstərmək üçün Nivo və Storybook istifadə edirik. Sadə bir komponent belə görünə bilər:

Əvvəlcə kök qovluğundan aşağıdakı əmri işə salaraq Storybooks qurun:

npm i -g @ hekayə kitabı / cli getstorybook

.Storybook qovluğunu kök anbarına kopyalayın və mövcud faylları dəyişdirin. Veb paketi və hekayə kitabı konfiqurasiyasını ehtiva edir. Bir hekayə qovluğu yaradın və komponentiniz üçün nümunə hekayə əlavə edin:

Npm run hekayə kitabını başladın və brauzerdə localhost açın. Aşağıdakı nəticəni görməlisiniz:

Seçimlər və test məlumatları ilə oynamağa çalışın. Hekayələr kitabı bir anda görünüşünü dəyişdirəcək.

HTML-i PNG-ə çevirin

Tipik olaraq, Facebook Messenger və Slack kimi söhbət sistemlərində istifadəçilər dialoqa HTML kartları əlavə edə bilmirlər. Növbəti addım HTML-ni PNG görüntüsünə çevirəcək bir köməkçi yaratmaqdır.

Jsdom kitabxanası ilə sadə bir skript istifadə edərək brauzer davranışını təqlid edə və HTML kodunu belə seriallaşdıra bilərik:

createDomForChart yeni bir jsdom nümunəsini qaytarır və qrafik funksiyası sadəcə komponentlər göstərildikdə dom.serialize () çağırır.

PhantomJS ilə bu sadə skriptdən istifadə edərək işarələri şəkillərə çevirə bilərik:

Screenshot.js-i HTML simli, eni və hündürlüyü ilə Phantomj-in icra edilə bilən yoluna ötürürük və göstərilən görüntü ilə buferi geri çağırırıq.

İki PhantomJS ikili (OS X və Linux üçün) istifadə etdiyimi görə bilərsiniz. Linux versiyasına AWS mühitində ehtiyacımız var. Bunları PhantomJS.org saytından yükləyə və ya depodan fayllardan istifadə edə bilərsiniz.

Hər şeyi bir-birinə bağlayın

İndi istəkləri idarə etmək üçün Lambda yaradacağıq. PNG göstərmə məntiqini ayrı bir xidmətə qoymağı məsləhət görürəm. PhantomJS ikili ölçüsü təxminən 50MB olduğundan, API-də dəyişikliklərin edilməsi yerləşdirməni ləngitəcəkdir. Bu lambdanı başqa məqsədlər üçün də istifadə edə bilərsiniz.

Kök qovluğunda webpack.config.ts (mənbə kodunu bağlamaq üçün) və serverless.base.js (əsas serversiz konfiqurasiyanı təyin etmək üçün) yaratmağa başlayacağıq.

Serversiz JavaScript konfiqurasiyalarının istifadəsi halları haqqında daha çox məlumat əldə etmək istəyirsinizsə, əvvəlki məqaləmə baxın.

Dağıtım adlarını və şəkil qabını aşağıdakı kimi dəyişdirməlisiniz:

deploymentBucket: {ad: 'com.github-stats .... deploys'}, mühit: {BUCKET: 'com.github-stats .... images', GITHUB_TOKEN: '$ {env: GITHUB_TOKEN}', SLACK_TOKEN: '$ {env: SLACK_TOKEN}, MƏRHƏLƏ:' $ {self: provider.stage} '},

Çünki vedrənin adı dünya miqyasında unikal olmalıdır.

HTML-ni PNG xidmətinə çevirin

Əvvəlcə yaradılan görüntünün URL-sini qaytaran işləyici yaradaq. İşləyici sorğu orqanını təsdiqləməli və işləməli olmalıdır:

... Və hər şey qaydasındadırsa, görüntü yaratmalı və S3 kovasına qoymalıdır.

Mənbə sənədlərini birləşdirmək üçün webpack.config.ts faylını yaradaq. PhantomJS ikili sənədləri birləşdirmək və onlara işləmək üçün icazə vermək üçün copy-webpack-plugin və webpack-permissions-plugin istifadə edəcəyik. Bunu etmək üçün, Webpack-in fayl sistemi hüquqlarını varsayılan olaraq dəyişdirmək üçün icazələri olmadığından sudo ilə dağıtma əmrini çalıştırmalıyıq.

Son addım, işləyicimizi API Gateway hadisəsi ilə əlaqələndirmək üçün serverless.js faylını istifadə etməkdir.

İndi statistika işləyicisi üçün eyni addımları atmalıyıq, ancaq webpack.config.ts-də hər hansı bir dəyişiklik etməyimizə ehtiyac yoxdur.

Fərq yalnız Lambda-ya zəng etmək üçün əlavə bir imtiyazdır:

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

Slack Bot qurun

Son addım bot üçün mesaj hadisələrini idarə edəcək bir xidmət yaratmaqdır. Sadəlik naminə yalnız qeydləri əhatə edəcəyik. Əsas hadisə işləyicisini quraq.

Slack-dən bir doğrulama hadisəsini işlətməliyik və 200 status və sorğu parametrləri ilə cavab verməliyik:

Geri çağırış (boş, {bədən: JSON.stringify ({problem: (slackEvent kimi VerificationEvent) .challenge}), statusCode: 200});

Slack hadisəsini düzgün idarə etmək üçün son nöqtə 3000 milisaniyə (3 saniyə) ərzində cavab verməlidir. Buna görə dərhal cavab verməli və postMessage API istifadə edərək asenkron bir şəkildə təqib mesajı göndərməliyik.

Yuxarıdakı kodda bir depo adının çıxarılması üçün mesaj gövdəsini təhlil etdik və bir şəkil urlini almaq və Slack'a bir mesaj göndərmək üçün bir şəkil statistikası Lambda çağırdıq. İşlənənin tam kodunu burada tapa bilərsiniz.

Serverless.js və Webpack konfiqurasiyaları üçün kod stats xidmətinə bənzəyir. Beləliklə, onu qurmaqda çətinlik çəkirsinizsə, tam mənbə kodunu yoxlayın.

Slack tətbiqi yaradın

İndi yeni bir Slack tətbiqi yaradaq. Slack API-yə gedin, yeni bir hesab yaradın (hələ yoxsa), yeni bir tətbiq yaradın və "Sahələr" bölümünə bot sahəsini əlavə edin.

Kenar çubuğundakı OAuth & Permmissions bölməsinə keçin.

Bot istifadəçi sahəsini əlavə edin.

Daha sonra tətbiqetməni şirkətinizə yükləyə və ayələr əldə edə bilərsiniz.

Xidmətlərin göstərilməsi

Əvvəlki versiyalar JavaScript konfiqurasiya sənədlərini dəstəkləmədiyi üçün 1.26-dan yuxarı bir serversiz çərçivə versiyasını quraşdırmalısınız. Birdən çox xidmətin yerləşdirilməsini asanlaşdırmaq üçün slx qurmağı da məsləhət görürəm.

npm install -g serversiz npm install -g işləmir

Bot işarələrini GitHub və Slack-dən kopyalayın və onları müvafiq olaraq GITHUB_TOKEN və SLACK_TOKEN mühit dəyişkənlərinə qoyun. Terminalda aşağıdakı əmri işə salın:

sudo GITHUB_TOKEN = SLACK_TOKEN = slx hamısını yerləşdirin

Yuxarıda qeyd edildiyi kimi, PhantomJS ikili fayllarında icra icazələrini təyin etmək üçün sudo-ya ehtiyacımız var.

Səbirli olun! Yerləşdirmə bir müddət çəkə bilər. Sonda oxşar çıxışı görməlisiniz:

Yerləşdirmə uğurla başa çatıb
[app / html-to-png] [bitdi]: Xidmət məlumat xidməti: html-to-png Mərhələ: dev bölgəsi: us-east-1 Yığın: HTML-to-PNG-Dev API açarı: Yoxdur Bitiş nöqtələri: Yoxdur Funksiyalar : renderToPng: html-to-png-dev-renderToPng Serverless: Köhnə xidmət versiyaları silinəcək ... [app / slack] [done]: Service Information service: git-stats-slack Stage: dev region: us-east-1 stack : git-stats-slack-dev API açarı: Heç bitmə nöqtəsi: POST - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handler Funksiyalar: eventHandler: git-stats-slack-dev-eventHandler Serverless: Köhnə xidmət versiyaları silinəcək ... [app / stats] [done]: Service Information service: git-stats Stage: dev region: us-east-1 stack: git-stats- dev API açarı: Yoxdur Bitiş Noktaları: GET - https://xxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/contributors/ Zonenowner Genealogie / Genealogierepo} Funksiyalar: getContributorStatsImage: git-stats -dev-getContributorStatsImage Serverless: Alte Dien st versiyaları silinəcək ...

Son addım hadisələri qeyd etmək üçün son nöqtəmizə abunə olmaqdır.

Slack API naviqasiyasında "Hadisə Abunəliyi" bölməsini seçin.

Sonra yerləşdirmə əmrinin çıxışında olan hadisə işləyici urlinə yapışdırın.

Bir az oynamaq vaxtı! Göstərilən şəkillərin bəzi nümunələri:

Serversiz / Serversiz

facebook / cavab ver

plouc / nivo

Bu belədir!

Ümid edirəm bu məqaləni faydalı tapdınız. Xidmətdə görmək istədiyiniz şərhlərdə digər statistika növlərini görmək istərdim.

Xahiş edirəm məqaləni bəyəndinizsə alqışlayın! Söhbət etmək və ya bağlanmaq istəyirsinizsə, məni Twitter, GitHub və Linkedin-də tapa bilərsiniz.